CSS-Überlauf - nur 1 Textzeile

134

Ich habe divmit folgendem CSS-Stil:

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

Wenn ich darin diveine lange Textzeile einfüge, wird eine neue Zeile unterbrochen und der gesamte Text angezeigt. Ich möchte nur eine Textzeile haben, die keine Zeilenumbrüche verursacht. Wenn der Text lang ist, möchte ich, dass dieser überlaufende Text verschwindet.

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

Wenn ich eine Höhe hinzufüge, die der Schriftart entspricht, sollte dies möglicherweise funktionieren und in verschiedenen Browsern keine Probleme verursachen.

Wie kann ich das machen?

html css overflow Home Run
quelle
Können Sie Ihr Problem auf jsFiddle demonstrieren ?
Harry Joy

Antworten:

352

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

Septnuits
quelle
Die Auslassungspunkte werden jedoch nicht angezeigt, wenn der Text die angegebene Dimension überschreitet. stackoverflow.com/questions/26342411/…
SearchForKnowledge
Es funktioniert, großartig. Aber ich brauche, ...wenn es mehr Zeichen zu zeigen gibt, denn wenn die Länge der Zeile lang ist und es aus dem geschriebenen div geht.
Moshii
Dies wirkt seltsam, wenn der versteckte Text Hyperlinks enthält. Wenn ich durch die Seite blättern würde, würde der Link im ausgeblendeten Text auf den Bildschirm scrollen, wenn er ausgeblendet werden sollte.
Eric
76

Wenn Sie angeben möchten, dass in diesem Bereich noch mehr Inhalte verfügbar sind, möchten Sie möglicherweise die "Auslassungspunkte" anzeigen:

text-overflow: ellipsis;

Dies sollte zusätzlich zu white-space: nowrap;den von Septnuits vorgeschlagenen sein.

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

Mouli
quelle
47
Ich glaube, Sie müssen text-overflow: ellipsis;mit overflow: hidden;und verwenden white-space: nowrap;, damit es funktioniert
Francisco Costa
caniuse.com/#feat=text-overflow aka. Ja, du kannst. Ziehen Sie in Betracht, den gesamten Inhalt in das title-Attribut einzufügen, damit der Benutzer weiterhin darauf zugreifen kann.
DanMan
meins wird nur in einer Zeile angezeigt und füllt den DIV nicht aus, bevor die Auslassungspunkte angezeigt werden ... stackoverflow.com/questions/26342411/… ( jsfiddle.net/ofrj55j4/20 )
SearchForKnowledge
43

Sie können diesen CSS-Code verwenden:

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

Die Eigenschaft " Textüberlauf" in CSS behandelt Situationen, in denen Text abgeschnitten wird, wenn er über das Feld des Elements läuft. Es kann abgeschnitten (dh abgeschnitten, ausgeblendet) und mit Auslassungspunkten versehen werden ('…', Unicode-Bereichswert U + 2026).

Beachten Sie, dass Text-Überlauf tritt nur , wenn der Überlauf - Eigenschaft des Containers den Wert versteckt , blättert oder Auto und white-space: nowrap; .

Textüberlauf kann nur bei Elementen auf Block- oder Inline-Blockebene auftreten , da das Element eine Breite haben muss, um übergelaufen zu werden. Der Überlauf erfolgt in der Richtung, die durch die Richtungseigenschaft oder verwandte Attribute bestimmt wird.

Gaurav Tripathi
quelle
6

Der beste Code für UX und UI ist

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
Omid Ahmadyani
quelle
0

Wenn Sie einen Zusatz haben, können Sie diesen CSS-Code unten verwenden.

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

Machen Sie den gesamten Zeilentext sichtbar.

shafii muhudi
quelle
0 
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

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

Jaydeep Kataria
quelle
-2

Ich hatte das gleiche Problem und löste es mit:

display: inline-block;

auf die divfragliche.

Dekcolnu
quelle