Wie verstecke ich einen Textüberlauf mit einem benutzerdefinierten Indikator in CSS?

Textüberlauf mit einem Indikator ausblenden

Um Text, der mehr als zwei Zeilen überschreitet, zu komprimieren und den ausgeblendeten Inhalt anzuzeigen, kann bis dahin eine benutzerdefinierte Lösung implementiert werden die zukünftige Implementierung der Line-Clamp-Eigenschaft.

Benutzerdefiniert Lösung

1. Legen Sie die Zeilenhöhe und die maximale Höhe des Textcontainers fest, um die Anzeige auf zwei Zeilen zu beschränken.
2. Verwenden Sie die Eigenschaft overflow:hidden, um den überlaufenden Text zu verbergen.
3. Erstellen Sie einen Schatteneffekt, um den Text zu verdecken, der sonst durch die Auslassungspunkte sichtbar wäre.
4. Platzieren Sie a span-Element mit dem gewünschten Indikatortext unten rechts im Container unter Verwendung absoluter Positionierung.
5. Fügen Sie die Auslassungspunkte am Anfang des span-Elements und den Indikatortext an dessen Anfang hinzu Ende.

CSS

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

Diese Lösung verbirgt Überlauftext und zeigt an der angegebene Indikator nach zwei Zeilen.

Das obige ist der detaillierte Inhalt vonWie verstecke ich einen Textüberlauf mit einem benutzerdefinierten Indikator in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!