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

也可以

Answer 2

您需要指定一个高度，以便overflow: hidden按预期工作。

Answer 3

使用以下规则：

overflow: hidden;
white-space: nowrap;

请注意，nowrap没有连字符。

Answer 4

text-overflow: clip

这应该有所帮助。请在此处阅读：https://developer.mozilla.org/en/CSS/text-overflow

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

4 个答案: