任何方式來停止特定的文本行溢出到下一行？

我目前已經有幾個文本規則集，p，h1，h2等等的div標籤任何方式來停止特定的文本行溢出到下一行？

我想知道是否有反正我可以讓它，使這些規則之一不會如果文本對於div的寬度變得太長，則轉到下一行，而不是在瀏覽器中顯示的文本不在瀏覽器中顯示？

例如，我的p標籤是正常的，如果文本行太長，它會直接溢出到下一行，與我的h1和h2相同，但我希望我的h3只能佔用一個並且永不佔用多於一個，即使這意味着某些文本在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;，並且在Firefox中工作，但不在IE，Opera，Chrome或Safari中。

我也試過text-overflow:hidden;和textoverflow-hidden，因爲由於某種原因，我認爲這些可能工作，但他們沒有在任何瀏覽器。

這些應用程序中的任何一個是否正常工作，或者有其他方法可以實現這一目標？

來源

2012-01-24 Flickdraw

white-space: nowrap; 
overflow: hidden;

應（至少在IE8及以上）做

*編輯只是雙重檢查和它shoudl是老年人，即太http://reference.sitepoint.com/css/white-space

來源

2012-01-24 15:54:48 wheresrhys

這對於把所有內容放在一行上都很好，但是無論如何，我可以隱藏文本，這些文檔在div邊上運行？ – Flickdraw

是的，溢出：隱藏 – wheresrhys

完美工作，謝謝！ – Flickdraw

你需要指定順序的高度確定爲overflow: hidden按照您的預期工作。

來源

2012-01-24 15:55:13 shaunsantacruz

使用下列規則：

overflow: hidden; 
white-space: nowrap;

注意nowrap沒有連字符。

來源

2012-01-24 15:57:03

這適用於IE8，Firefox，Chrome，Safari和Opera。 http://jsfiddle.net/p7Ljj/2/ –

text-overflow: clip

這應該有所幫助。在這裏閱讀：https://developer.mozilla.org/en/CSS/text-overflow

來源

2012-01-24 15:57:49 Ninja

我剛剛測試了這一點，並在Firefox中把它放在同一行，但不會隱藏它，除非使用溢出：隱藏;而在IE8中，Opera，Safari和Chrome似乎並沒有做任何事情。 – Flickdraw

這個例如應該給你指針：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow – Ninja

任何方式來停止特定的文本行溢出到下一行？

回答

相關問題