Wie kann ich Ellipsentext mit Zeilenklammer in CSS anpassen?

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.";

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;
}

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>

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!