특정 줄의 텍스트가 다음 줄로 넘치지 않도록하는 방법은 무엇입니까?

Question

나는 여러 텍스트 규칙이 설정된 div 태그가 있습니다. p, h1, h2 ... 등

어쨌든 나는이 규칙 중 하나가 텍스트가 div의 너비에 비해 너무 길어지고 대신 div에서 실행되는 텍스트가 브라우저에 표시되지 않는 경우 다음 줄로 이동하십시오.

예를 들어, 내 p 태그는 정상입니다. 텍스트 줄이 너무 길면 내 h1 및 h2와 마찬가지로 다음 줄로 넘칠 것입니다.하지만 h3과 h2가 같을 때만 한 줄 이상을 차지하지 않아도됩니다. 즉, div의 가장자리에서 일부 텍스트가 잘리는 경우에도 마찬가지입니다.

HTML

<div id="box"> 

    <h1>This is the first header and this will overflow onto the next line when it gets too long.</h1> 

    <h2>This is the second header and this will overflow onto the next line when it gets too long..</h2> 

    <p>This is the paragraph and this will overflow onto the next line when it gets too long.</p> 

    <h3>This is the third header and I do not want this to overflow when it gets too long... But it does :(</h3> 

</div> 

CSS

#box { 
position:absolute; 
width:540px; 
height:auto; 
left:80px; 
top:0px; 
padding-bottom:20px; 
background-color:#000000; 
} 
#box h1{ 
font-family:Ebrima; 
font-size:22px; 
font-weight:normal; 
text-decoration:underline; 
text-align:center; 
margin-bottom:10px; 
color:pink; 
} 
#box h2{ 
font-family:Ebrima; 
font-size:20px; 
font-weight:normal; 
font-style:italic; 
text-align:center; 
margin-bottom:15px; 
color:lightyellow; 
} 
#box h3{ 
font-family:Ebrima; 
font-size:14px; 
font-weight:bold; 
text-align:center; 
margin-top:10px; 
margin-left:25px; 
margin-right:25px; 
color:lightgreen; 
overflow:hidden; 
} 
#box p{ 
font-family:Ebrima; 
font-size:16px; 
font-weight:lighter; 
text-align:justify; 
margin-left:25px; 
margin-right:25px; 
color:lightblue; 
} 

는 또한 도움이되는 JSfiddle했다.

나는 h3 규칙에 overflow:hidden;을 추가하려고 시도했지만 파이어 폭스에서는 작동하지만 IE, Opera, Chrome 또는 Safari에서는 작동하지 않습니다.

또한 때문에 나는 그 작동 거라고 생각하지만 그들은 브라우저 중하지 않았다 어떤 이유로 text-overflow:hidden; 및 textoverflow-hidden을 시도했습니다.

그 중 어떤 것이 제대로 작동했는지 또는 다른 방법으로이를 수행 할 수 있습니까?

Answer 1

white-space: nowrap; 
overflow: hidden; 

는 (적어도 최대 IE8과) 그것을해야

* 편집 그냥 더블 - 확인하고 너무

Answer 2

http://reference.sitepoint.com/css/white-space 당신은 순서에 따라 높이를 지정해야합니다 즉, 이전에 확인 할 수 shoudl overflow: hidden은 예상대로 작동합니다.

Answer 3

는 다음과 같은 규칙을 사용하여 하이픈이없는

overflow: hidden; 
white-space: nowrap; 

주 nowrap있다.

Answer 4

text-overflow: clip 

이 정보가 도움이됩니다. 여기를 읽으십시오 : https://developer.mozilla.org/en/CSS/text-overflow