Wie kann ich Ellipsentext mit Zeilenklammer in CSS anpassen?-CSS-Tutorial-php.cn

Wie kann ich Ellipsentext mit Zeilenklammer in CSS anpassen?

Susan Sarandon

Freigeben： 2024-12-03 02:54:11

Original

939 Leute haben es durchsucht

How to Customize Ellipsis Text with Line Clamp in CSS?

Benutzerdefinierter Ellipsentext mit Zeilenklammer

Problem:

Verstecken eines Teils des Textes, der zwei Zeilen überschreitet, während der Anzeige der versteckte Überlauf mit einem benutzerdefinierten Text, wie „...123 T.“

Lösung:

Zukünftig wird die Line-Clamp-Eigenschaft eine praktische One-Line-Lösung bieten:

line-clamp: 2 "...123 T.";

Nach dem Login kopieren

Hacky-Alternative (für aktuelle Browser):

Bis die Line-Clamp-Eigenschaft weithin unterstützt wird, ein Hacky Die Problemumgehung umfasst das folgende CSS und HTML:

CSS:

.container {
  max-width: 200px;
  margin: 5px;
}

.main-text {
  line-height: 1.2em; 
  max-height: calc(2 * 1.2em); 
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "..."; 
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

Nach dem Login kopieren

HTML:

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
    vitae. <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

Nach dem Login kopieren

Hinweis: Diese Problemumgehung besteht darin, einen versteckten Bereich zu erstellen, um die Auslassungspunkte zu ersetzen, und einen großen Kastenschatten zu verwenden, um den Text dahinter zu verbergen. Es ist keine ideale Lösung, bietet aber eine vorübergehende Lösung, bis die Leitungsklemme weit verbreitet ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Ellipsentext mit Zeilenklammer in CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!