Currently, I have a div tag with several text rules, p, h1, h2 ... etc. etc.
I am interested, anyway, can I make sure that one of these rules does not go down the next line if the text gets too long for the width of the div and instead the text that escapes with the div is not displayed in the browser?
So, for example, my p-tag is normal, if the line of text is too long, it just overflows to the next line down, the same with my h1 and h2, but I want my h3 to occupy only one line and never take more one, even if it means that part of the text falls on the edge of the 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; }
I also did JSfiddle to help.
I tried adding overflow:hidden; as a rule h3 and worked in firefox, but not in IE, Opera, Chrome or Safari.
I also tried text-overflow:hidden; and textoverflow-hidden , because for some reason I thought they might work, but they didn't hit any of the browsers.
If any of them worked correctly or are there other ways, can I do this?