4
私は現在いくつかのテキストルール、p、h1、h2 ...などを設定したdivタグを持っています。特定の行のテキストが次の行にオーバーフローしないようにする方法はありますか？
私はこれらのルールの1つがテキストがdivの幅に対して長すぎる場合、次の行に移動し、その代わりにdivには表示されないテキストがブラウザに表示されませんか？
たとえば、my pタグは正常です。テキスト行が長すぎると、次の行にオーバーフローします。これはh1とh2と同じですが、h3は1つしか使用しませんたとえそれがdivの端で切り取られたテキストの一部を意味するとしても、1つ以上の文字を取り上げることはありません。
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、オペラ、クロムまたはSafariで働いていました。
また、私はtext-overflow:hidden;とtextoverflow-hiddenを試しました。何らかの理由でそれらがうまくいくと思っていたが、いずれのブラウザでもそうではなかったからだと思ったからです。
これらのいずれかが正常に働いているか、私はこれを達成することができ、他の方法がありますでしょうか？
？ – Flickdraw
うん、オーバーフロー：隠し – wheresrhys
完璧に働いて、ありがとう！ – Flickdraw