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
Vous devez vous connecter pour publier un commentaire.
devrait le faire (dans ie8 et jusqu'à au moins)
*modifier il suffit de double-vérifié, et il shoudl être ok dans les vieux ie trop http://reference.sitepoint.com/css/white-space
yep, overflow:hidden
Fonctionne parfaitement, merci!
Cependant, ce n'est pas efficace dans IE6, toutes les contourner?
OriginalL'auteur wheresrhys
Vous devez spécifier une hauteur pour
overflow: hidden
de travail comme vous le souhaitez.OriginalL'auteur shaunsantacruz
Utilisez les règles suivantes:
Noter que
nowrap
n'ont pas de trait d'union.OriginalL'auteur Michael Liu
cela devrait aider. Lire ici: https://developer.mozilla.org/en/CSS/text-overflow
cette par exemple, devrait vous donner des pointeurs: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
OriginalL'auteur Ninja