Any way to stop a specific line of text from overflowing onto the next line?

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?

Solution 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

Solution 2

You need to specify a height in order for overflow: hidden to work as you expect.

Solution 3

Use the following rules:

overflow: hidden;
white-space: nowrap;

Note that nowrap doesn't have a hyphen.

Solution 4

text-overflow: clip

this should help. Read here: https://developer.mozilla.org/en/CSS/text-overflow

View more solutions

Comments

[Flickdraw]

That works great for putting it all on one line, but is there anyway I can hide the text which runs out of the sides of the div?

[Michael Liu]

This works in IE8, Firefox, Chrome, Safari, and Opera. jsfiddle.net/p7Ljj/2

[Flickdraw]

I've just tested this and in Firefox it puts it all on the same line but doesn't hide it unless used with overflow:hidden; and in IE8, Opera, Safari and Chrome it doesn't seem to do anything.

[Ninja]

this eg should give you pointers: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflo‌​w