Text zu lange in div zuschneiden

82

<div style="display:inline-block;width:100px;">

very long text
</div>

Jede Möglichkeit, reines CSS zu verwenden, um den zu langen Text zu schneiden, anstatt ihn in der nächsten neuen Zeile anzuzeigen und nur maximal 100 Pixel anzuzeigen

html css

— Cometta
quelle

54

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

Dies ist ein möglicher Ansatz, den ich mir vorstellen kann

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

Auf diese Weise wird der Langtext immer noch umgebrochen, ist jedoch aufgrund der overflowEinstellung nicht sichtbar. Durch Festlegen line-heightderselben Einstellung stellen heightwir sicher, dass immer nur eine Zeile angezeigt wird.

Sehen Sie hier die Demo und eine schöne Beschreibung der Überlaufeigenschaften mit interaktiven Beispielen.

— Davor Lucic
quelle

1

Ich würde nicht auf "Zeilenhöhe" zählen, um das Umbrechen zu verhindern, da der Benutzer möglicherweise seine Schriftarteinstellungen (für kleineren Text) im Browser geändert hat. Wenn Sie bei großen Schriftarten die Höhe des Div auf die Anzahl der Pixel festgelegt haben, kann dies ebenfalls schrecklich aussehen. Insbesondere bei mobilen Browsern und "Retina" -Bildschirmen würde ich versuchen, die Höhe des Div flexibel zu lassen, wenn das Design-Layout dies zulässt - was es sollte!

— PJ Brunet

151

Sie können verwenden:

overflow:hidden;

um den Text außerhalb der Zone auszublenden.

Beachten Sie, dass möglicherweise der letzte Buchstabe abgeschnitten wird (sodass ein Teil des letzten Buchstabens weiterhin angezeigt wird). Eine schönere Möglichkeit ist es, am Ende eine Ellipse anzuzeigen. Sie können dies tun, indem Sie text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

— Arseni Mourzenko
quelle

Leerraum: Nowrap ist nicht wirklich notwendig, da ich mehrere Zeilen habe, die einen langen Dateipfad anzeigen. Ohne Leerraum erhält der lange, unzerbrechliche Pfad die Auslassungspunkte, und in der nächsten Zeile wird der Rest des Pfads angezeigt. Der Kicker ist, dass ich den Text (einschließlich Auslassungspunkte) kopieren und dann den gesamten Pfad einfügen kann. Nett!

— Robert Koch

Falls Sie sich gefragt haben (wie ich), funktionieren Auslassungspunkte in älteren Versionen von Firefox nicht. "Seit Firefox Version 7 Textüberlauf: Auslassungspunkte werden unterstützt." stackoverflow.com/questions/5990414/…

— PJ Brunet

Was ist, wenn Sie einen Tooltip zum Schweben haben möchten, um den vollständigen Text anzuzeigen, oder etwas Ähnliches?

— pedrorijo91

2

@ pedrorijo91 Sie können einfach title="full text goes here"in der HTML verwenden.

— Jerry

27

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}

http://jsfiddle.net/hT3YA/

— s1ntez
quelle

6

Warum nicht relative Einheiten verwenden?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

— Tomas Macek
quelle

4

Der folgende Code verbirgt Ihren Text mit der von Ihnen festgelegten festen Breite. aber nicht ganz richtig für reaktionsschnelle Designs.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Aktualisieren

Ich habe bei (mobilen) Geräten festgestellt, dass der Text aufgrund (fester Breite) miteinander (gemischt) ist. Daher habe ich den obigen Code so bearbeitet, dass er wie folgt ausgeblendet wird:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Die (maximale Breite) stellen sicher, dass der Text unabhängig von der (Bildschirmgröße) ausgeblendet und nicht miteinander gemischt wird.

— Mizo-Spiele
quelle

3

Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.

— Donald Duck

0

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

Erweitern Sie das Snippet

— Supriya
quelle