Vier Möglichkeiten, Textüberlauf-Auslassungspunkte in CSS zu implementieren (mit Code)

In diesem Artikel geht es um die vier Methoden zur Realisierung von Textüberlauf-Auslassungspunkten in CSS (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Im Projekt geht es darum, ein Auslassungszeichen nach einer Zeile oder einer bestimmten Anzahl von Zeilen hinzuzufügen. Beim Hinzufügen eines Auslassungszeichens nach einer bestimmten Zeile werden die Attribute -webkit-line-clamp und -webkit-box-orient verwendet Es wird Situationen geben, in denen das Attribut „webpack-packaging-webkit-box-orient“ ignoriert wird 🎜>

2. Welche Zeile implementiert die Textauslassungspunkte

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;

Bei Verwendung des Webpack-Verpackungstools , diese -webkit-box- wird ignoriert. Für das orient-Attribut ändern Sie es einfach in die folgende Schreibweise:

display: -webkit-box;
-webkit-box-orient: vertical;  /* 设置方向 */
-webkit-line-clamp: 2;  /* 设置超过为省略号的行数 */
overflow: hidden;

• 3. Fügen Sie nach der Zahl mit js ein Auslassungszeichen hinzu von Wörtern

  display: -webkit-box; 
  overflow: hidden;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 8;
  text-overflow: ellipsis;

4. Wortumbruch und Zeilenumbruch

white-space:normal (automatischer Zeilenumbruch), Wenn der geschriebene Text die definierte Breite überschreitet, wird er automatisch umbrochen. Wenn die geschriebenen Daten jedoch aus einer Reihe von Zeichen, Buchstaben oder Zahlen ohne Leerzeichen bestehen und die Breite des Containers überschreiten, wird der Container ohne Zeilenumbrüche erweitert

Sie können Folgendes verwenden: word -break:break-all;word-wrap:break-word, um
word-break:break-all Wann zu lösen Die Breite des Containers wird überschritten. Wenn ein Wort sehr lang ist, wird das Wort abgeschnitten und separat geschrieben
word-wrap:break-word Wenn die Breite des Containers beträgt überschritten, wenn ein Wort sehr lang ist, wird das Wort in die nächste Zeile anstelle des Worts Truncate eingefügt
Wortumbruch: normal | >Normal: Zeilenumbrüche innerhalb von Wörtern zulassen
• Alles umbrechen: Zeilenumbrüche innerhalb von Wörtern zulassen

  Alles behalten: Nur Zeilenumbrüche bei Leerzeichen halber Breite oder Bindestrichen.

Wortumbruch: normal |. Umbruchwort

normal: Ermöglicht dem Inhalt, die angegebene Containergrenze zu durchbrechen.

Umbruchwort: Der Inhalt wird innerhalb der Grenze umgebrochen. Bei Bedarf kommen auch Wortumbrüche vor

Das obige ist der detaillierte Inhalt vonVier Möglichkeiten, Textüberlauf-Auslassungspunkte in CSS zu implementieren (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!