CODEWITHSUNDEEP
htmlcsstextoverflow
Flickdraw
Flickdraw

Reputation: 683

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

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?

Upvotes: 5

Views: 12408

Answers (4)

wheresrhys
wheresrhys

Reputation: 23570

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

Upvotes: 14

Ninja
Ninja

Reputation: 5152

text-overflow: clip

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

Upvotes: 2

Michael Liu
Michael Liu

Reputation: 55509

Use the following rules:

overflow: hidden;
white-space: nowrap;

Note that nowrap doesn't have a hyphen.

Upvotes: 2

shaunsantacruz
shaunsantacruz

Reputation: 8930

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

Upvotes: 4

Related Questions