Wie kann ich Text mit Auslassungspunkten abschneiden und „123 T' anhängen? in der nächsten Zeile?

Text nach Punkten inline mit der zweiten Zeile der Textüberlauf-Ellipse platzieren

Problem

Um übermäßig langen Text zu verdichten, möchten Sie einen Teil des Textes verbergen und gleichzeitig einen Überlauf mit „...123 T“ anzeigen. in der nachfolgenden Zeile, wie im Bild unten zu sehen:

[Bild des Textes mit Auslassungspunkten und „123 T.“ abgeschnitten]

Lösung

In naher Zukunft wird eine einzelne Codezeile mit „line-clamp: 2 „...123 T.;“ ausreichen. Weitere Informationen finden Sie unter in der Spezifikation verfügbar.

Haftungsausschluss

Bevor diese Funktionalität allgemein verfügbar wird, finden Sie hier eine grobe Problemumgehung, um das Gewünschte zu erreichen Ergebnis:

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>

Das obige ist der detaillierte Inhalt vonWie kann ich Text mit Auslassungspunkten abschneiden und „123 T' anhängen? in der nächsten Zeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!