Question

I’ve currently got a div tag with several text rules set, p, h1, h2… etc etc.

I’m wondering is there anyway I can make it so that one of these rules will not go onto the next line down if the text becomes too long for the width of the div and instead, the text which runs off the div not being displayed in the browser?

So, for example, my p tag is normal, if the line of text gets too long it will simply overflow onto the next line down, same with my h1 and h2 but I want my h3 to only ever take up one line and to never take up more than one, even if that means some of the text getting chopped off at 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 made a JSfiddle to help.

I have tried adding overflow:hidden; to the h3 rule and that worked in firefox but not in IE, Opera, Chrome or Safari.

I’ve also tried text-overflow:hidden; and textoverflow-hidden because for some reason I thought those might work but they didn’t in any of the browsers.

Should any of those have worked properly or are there other ways I can achieve this?

Answer 1

white-space: nowrap;
overflow: hidden;

should do it (in ie8 and up at least)

*edit Just double-checked and it shoudl be ok in older ie too http://reference.sitepoint.com/css/white-space