CSS kein Textumbruch

76

Siehe Code http://jsbin.com/eveqe3/edit , ebenfalls unten angegeben.

Ich muss den Text in den Elementdivs so anzeigen, dass der Text nur im grünen Feld mit der angegebenen Breite angezeigt wird. Der Rest der Zeile muss ausgeblendet werden. Anregungen bitte ...

<style>
  #container{
    width : 220px;
  }
  .item{
    float:left;
    border: 1px solid #0a0;
    width: 100px;
    height: 12px;
    padding 2px;
    margin: 0px 2px;
  }
  .clearfix{
    clear: both;
  }
</style>
</head>
<body>
  <div id="container">
    <div class="item"> A very loooooooooooooooooooooong text </div>
    <div class="item"> Another looooooooooooooooooooong text </div>
    <div class="clearfix">  </div>
   </div>
</body>
</html>​
html css text Mithun Sreedharan
quelle
Nur zu Ihrer Information: Wenn Sie Ihre Höhe auf 12 Pixel einstellen und 2 Pixel auffüllen, sollten Sie die Schriftgröße 10 Pixel verwenden, damit der Rand nicht den unteren Rand der Zeichen abdeckt. Ich bevorzuge es jedoch, EM als Maß zu verwenden, damit es bei Benutzeränderungen besser skaliert werden kann.
Mark Schultheiss
Stellen Sie sicher, dass Sie Ihr Ergebnis in allen Zielbrowsern anzeigen, da sich die Schriftart / Größe standardmäßig unterscheidet.
Mark Schultheiss

Antworten:

190

Zusätzlich zum Überlaufen: versteckt, verwenden 

white-space:nowrap;
xor_eq
quelle
1
Ja!, das ist was ich will!
Mithun Sreedharan
1
Ich dachte nur, ich könnte hier etwas hinzufügen, da ich meinen <pre> -Block nicht dazu bringen konnte, das Umbrechen zu beenden. Ein vorhergehendes pre {} css-Element überschritt natürlich alles andere, was ich mit der .pre {} -Klasse zu tun versuchte. Dies könnte die Ursache für die Trauer einiger Menschen beim Einwickeln sein.
MitchellK
26

Benutz einfach:

overflow: hidden;
white-space: nowrap;

In den Divs Ihres Artikels

Macmade
quelle
3

Verwenden Sie den CSS-Eigenschaftsüberlauf. Zum Beispiel:

  .item{
    width : 100px;
    overflow:hidden;
  }

Die Überlaufeigenschaft kann einen von vielen Werten haben, z. B. ( ausgeblendet , Bildlauf , sichtbar ). Sie können den Überlauf auch in eine Richtung nur mit Überlauf-x oder Überlauf-y steuern .

Ich hoffe das hilft.

Ahmed Aman
quelle
Bitte beachten Sie overflow:hiddenhier jsbin.com/eveqe3/2/edit, der Teil der zweiten Zeile ist im Feld sichtbar. Ist es möglich zu vermeiden, dass Text in die nächste Zeile kommt?
Mithun Sreedharan