В настоящее время у меня есть тег 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, потому что по некоторым причинам я думал, что они могут работать, но они не работали ни в одном из браузеров.
Должен ли кто-нибудь из них работать должным образом или есть другие способы, которыми я могу этого достичь?