有什么方法可以阻止特定的文本行溢出到下一行？

Question

我目前有一个带有几个文本规则集的div标签,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.

我已经尝试添加overflow:hidden;到h3规则并且在Firefox中有效但在IE,Opera,Chrome或Safari中没有.

我也尝试了text-overflow:hidden;,textoverflow-hidden因为出于某种原因我认为这些可能有用,但他们没有在任何浏览器中.

如果其中任何一个工作正常或有其他方法我可以做到这一点？

Answer 1

white-space: nowrap;
overflow: hidden;

应该这样做(至少在ie8及以上)

*编辑只需双重检查,它可以在较旧的即可http://reference.sitepoint.com/css/white-space