Un moyen pour arrêter une ligne de texte spécifique de déborder sur la ligne suivante?

Je suis actuellement a obtenu une balise div avec plusieurs règles de jeu, p, h1, h2,... etc etc.

Je me demandais est-il de toute façon je peux faire en sorte que l'une de ces règles n'auront pas d'aller à la ligne suivante vers le bas si le texte est trop long pour la largeur de la div et au lieu de cela, le texte qui s'écoule de la div ne s'affiche pas dans le navigateur?

Ainsi, par exemple, ma balise p est normal, si la ligne de texte est trop long, il sera tout simplement déborder sur la ligne suivante vers le bas, même avec mon h1 et h2, mais je veux que mon h3 pour ne jamais prendre jusqu'à une ligne et à ne jamais prendre plus d'un, même si cela signifie que la partie du texte se coupait au bord de la 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;
}

J'ai aussi fait un JSfiddle pour vous aider.

J'ai essayé d'ajouter overflow:hidden; pour le h3 de la règle et qui a travaillé dans firefox mais pas sous IE, Opera, Chrome ou Safari.

J'ai aussi essayé de text-overflow:hidden; et textoverflow-hidden parce que, pour une raison que je pensais que ceux qui pourraient travailler, mais ils n'ont pas dans tous les navigateurs.

Si l'un de ceux qui ont travaillé correctement ou il y a d'autres façons d'y parvenir?

OriginalL'auteur Flickdraw | 2012-01-24