CSS-Überlauf - nur 1 Textzeile

Habe ich div mit der folgenden css-Stil:

width:335px; float:left; overflow:hidden; padding-left:5px;

Wenn ich einfügen-in das diveine lange Zeile von text, es bricht in eine neue Zeile und zeigt den text ein. Was ich will, ist nur eine Textzeile, die nicht den Zeilenumbruch. Wenn der text lang ist, möchte ich dieses überlaufende text zu verschwinden.

Ich dachte über die Einstellung der Höhe aber es scheint falsch zu sein.

Vielleicht sollte ich hinzufügen, für die Höhe ist die gleiche wie die Schrift, es sollte funktionieren und keine Probleme in verschiedenen Browsern?

Wie kann ich das tun?

InformationsquelleAutor der Frage some Folk | 2011-09-25

  1. 260

    Wenn Sie einschränken möchten Sie auf eine Zeile, verwenden Sie white-space: nowrap; auf die div.

    InformationsquelleAutor der Antwort Septnuits

  2. 61

    Wenn Sie möchten, zu zeigen, dass es noch mehr Inhalt in diesem div, können Sie wahrscheinlich wollen, um zu zeigen, das "Auslassungszeichen":

    text-overflow: ellipsis;

    Diese sollte neben white-space: nowrap; vorgeschlagen Septnuits.

    Stellen Sie außerdem sicher, dass Sie Kasse dieser thread um dies zu umgehen in Firefox.

    InformationsquelleAutor der Antwort Mouli

  3. 16

    Können Sie diese css-code:

    text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

    Den text-overflow - Eigenschaft in CSS beschäftigt sich mit Situationen, wo der text abgeschnitten wird, wenn es überläuft das element die box. Es kann sein, abgeschnitten (d.h. abgeschnitten, verdeckt), display ein Ellipse ('...', Unicode-Range-Wert U+2026).

    Beachten Sie, dass text-overflow tritt nur auf, wenn der container das overflow-Eigenschaft den Wert verstecktBlättern oder auto und white-space: nowrap;.

    Text-overflow kann nur geschehen, auf block oder inline-block level-Elemente, weil das element muss eine Breite in Ordnung zu sein, überlauf-ed. Der überlauf passiert in der Richtung bestimmt durch die direction-Eigenschaft oder-bezogene Attribute.

    InformationsquelleAutor der Antwort Gaurav Tripathi

  4. 0

    Ich hatte das gleiche Problem und habe es gelöst mit:

    display: inline-block;

    auf die div in Frage stellen.

    InformationsquelleAutor der Antwort Dekcolnu

  5. -8
    line-height:335px;

    können Sie versuchen, diese...

    InformationsquelleAutor der Antwort bshener

Schreibe einen Kommentar