it-swarm.com.de

CSS-Überlauf - nur 1 Textzeile

Ich habe div mit dem folgenden CSS-Stil:

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

Wenn ich in dieses div eine lange Textzeile einfüge, wird in eine neue Zeile umgebrochen und der gesamte Text angezeigt. Ich möchte nur eine Textzeile haben, die nicht umbrochen wird. 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.

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

Wie kann ich das machen?

119
some Folk

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

310
Septnuits

Wenn Sie angeben möchten, dass in diesem Div noch weitere Inhalte verfügbar sind, möchten Sie möglicherweise die "Ellipse" anzeigen:

text-overflow: Ellipsis;

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

Vergewissern Sie sich auch, dass Sie diesen Thread auschecken, um dies in Firefox zu erledigen.

72
Mouli

Sie können diesen CSS-Code verwenden:

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

Die Text-Überlauf -Eigenschaft in CSS behandelt Situationen, in denen Text abgeschnitten wird, wenn er über das Feld des Elements hinausläuft. Es kann abgeschnitten (d. H. Abgeschnitten, ausgeblendet) sein und Auslassungspunkte ('…', Unicode-Bereichswert U + 2026) angezeigt werden.

Beachten Sie, dass Textüberlauf nur auftritt, wenn die Überlaufeigenschaft des Containers den Wert ausgeblendet, Bildlauf oder automatisch und - hat. Leerzeichen: nowrap;.

Ein Textüberlauf kann nur bei Block oder Inline-Block Ebenenelementen auftreten, da das Element eine Breite haben muss, um überlaufen zu werden. Der Überlauf erfolgt in der Richtung, die durch die direction-Eigenschaft oder verwandte Attribute bestimmt wird.

33
Gaurav Tripathi

der beste Code für UX und UI ist

white-space: nowrap;
text-overflow: Ellipsis;
overflow: hidden;
display: inherit;
5
Omid Ahmadyani

wenn Sie einen langen Text haben, können Sie diesen unten stehenden CSS-Code verwenden.

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

mach den ganzen zeilentext sichtbar.

1
shafii muhudi