我目前有一个带有几个文本规则集的div标签,p,h1,h2 ……等等.
我想知道无论如何我可以做到这样,如果文本对于div的宽度变得太长而这些规则中的一个不会进入下一行,而是从div中运行的文本没有被显示在浏览器中?
所以,例如,我的p标签是正常的,如果文本行太长,它将简单地溢出到下一行,与我的h1和h2相同,但我希望我的h3只占用一行而从不占用多个,即使这意味着一些文本在div的边缘被切断.
This is the first header and this will overflow onto the next line when it gets too long.
This is the second header and this will overflow onto the next line when it gets too long..
This is the paragraph and this will overflow onto the next line when it gets too long.
This is the third header and I do not want this to overflow when it gets too long... But it does :(
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;
}
我试过添加overflow:hidden;到h3规则,这在firefox中有效,但在IE,Opera,Chrome或Safari中没有.
我也试过文字溢出:隐藏;和textoverflow-hidden因为某些原因我认为那些可能有效,但他们没有在任何浏览器中.
如果其中任何一个工作正常或有其他方法我可以做到这一点?