CSS-Überlauf – nur 1 Textzeile

Lesezeit: 3 Minuten

Benutzer-Avatar
Home Run

Ich habe div mit folgendem CSS-Stil:

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

Wenn ich einfüge, hinein div, eine lange Textzeile, wird in eine neue Zeile umgebrochen und der gesamte Text angezeigt. Was ich möchte, ist, nur eine Textzeile zu haben, die keinen Zeilenumbruch hat. Wenn der Text lang ist, möchte ich, dass dieser überfließende Text verschwindet.

Ich dachte darüber nach, die Höhe einzustellen, aber es scheint falsch zu sein.

Vielleicht sollte es funktionieren und keine Probleme in verschiedenen Browsern verursachen, wenn ich eine Höhe hinzufüge, die der Schriftart entspricht?

Wie kann ich das machen?

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

  • Aber dann werden die Auslassungspunkte nicht angezeigt, wenn der Text über die angegebene Abmessung hinausgeht. stackoverflow.com/questions/26342411/…

    – Suche nach Wissen

    13. Oktober 2014 um 15:59 Uhr

  • Es funktioniert, großartig. Aber ich brauche ... wenn es mehr Zeichen zu zeigen gibt, weil wenn die Länge der Zeile lang ist und es aus dem geschriebenen div geht.

    – Moschi

    29. September 2016 um 13:18 Uhr

  • Dies wirkt seltsam, wenn der versteckte Text Hyperlinks enthält. Wenn ich durch die Seite blättern würde, würde der Link im versteckten Text auf den Bildschirm scrollen, obwohl er versteckt sein sollte.

    – Erich

    24. März 2017 um 3:36 Uhr

Benutzer-Avatar
Mouli

Wenn Sie angeben möchten, dass in diesem Div noch mehr Inhalt verfügbar ist, möchten Sie möglicherweise die “Auslassung” anzeigen:

text-overflow: ellipsis;

Dies sollte zusätzlich sein white-space: nowrap; vorgeschlagen von Septnuits.

Stellen Sie außerdem sicher, dass Sie diesen Thread auschecken, um dies in Firefox zu handhaben.

  • Ich glaube, Sie müssen verwenden text-overflow: ellipsis; mit overflow: hidden; und white-space: nowrap; damit es funktioniert

    – Francisco Costa

    11. März 2013 um 12:34 Uhr

  • caniuse.com/#feat=Textüberlauf auch bekannt. Ja, du kannst. Erwägen Sie, den gesamten Inhalt in das Titelattribut zu stellen, damit der Benutzer weiterhin darauf zugreifen kann.

    – DanMan

    11. Oktober 2013 um 10:28 Uhr


  • Mine wird nur in einer Zeile angezeigt und füllt das DIV nicht aus, bevor die Auslassungspunkte angezeigt werden … stackoverflow.com/questions/26342411/… (jsfiddle.net/ofrj55j4/20)

    – Suche nach Wissen

    13. Oktober 2014 um 16:01 Uhr

Benutzer-Avatar
Gaurav Tripathi

Sie können diesen CSS-Code verwenden:

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

Das Textüberlauf -Eigenschaft in CSS befasst sich mit Situationen, in denen Text abgeschnitten wird, wenn er die Box des Elements überläuft. Es kann sein abgeschnitten (dh abgeschnitten, versteckt), zeige an Ellipse („…“, Unicode-Bereichswert U+2026).

Beachten Sie, dass Textüberlauf tritt nur auf, wenn die Overflow-Eigenschaft des Containers den Wert hat versteckt, scrollen oder Auto und Leerzeichen: nowrap;.

Textüberlauf kann nur am passieren Block oder Inline-Block Level-Elemente, da das Element eine Breite haben muss, um überlaufen zu können. Der Überlauf erfolgt in der Richtung, die durch die Richtungseigenschaft oder verwandte Attribute bestimmt wird.

Benutzer-Avatar
Omid Ahmadyani

der beste Code für UX und UI ist

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

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Definieren Sie auch die Breite, um den Überlauf in einer Zeile festzulegen

Benutzer-Avatar
Alexander van Ostenrijk

Ich konnte dies erreichen, indem ich die verwendete webkit-line-clamp und folgende CSS:

div {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Benutzer-Avatar
shafii muhudi

Wenn Sie bitte einen langen Text hinzufügen, können Sie diesen CSS-Code unten verwenden.

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

den gesamten Zeilentext sichtbar machen.

1334510cookie-checkCSS-Überlauf – nur 1 Textzeile

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy