Detaillierte Erklärung des Problems bei der Kombination von CSS-Ellipsen und -Auffüllungen

Textkürzung mit CSS

Beachten Sie den folgenden Code, um den Stilcode für die automatische Textkürzung zu implementieren:

.truncate-text-4 {
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Anzeige: -webkit-box;
  -webkit-box-orient: vertikal;
  -Webkit-Leitungsklemme: 4;
}

Nutzen Sie zum Testen folgenden HTML-Ausschnitt:

<Stil>
  .mein-div {
    Breite: 300px;
    Rand: 10px automatisch;
    Hintergrund: #ddd;
  }
</Stil>
<div Klasse="mein-div truncate-text-4">
  So mischt man nicht – Der Knuth-Fisher-Yates-Algorithmus. Geschrieben von Mike James.
  Donnerstag, 16. Februar 2017. Manchmal sind einfache Algorithmen einfach falsch.
  in diesem Fall wird ein ... gemischt. Mit anderen Worten, wenn das Array gescannt wird, wird das Element
  unter
</div>

Wirkung der Operation:

Textabschneidungseffekt durch CSS- ellipsis

Das Polsterungsproblem

Alles funktioniert perfekt, bis ich dem Textcontainer padding hinzufüge.

  .mein-div {
    Breite: 300px;
    Rand: 10px automatisch;
    Hintergrund: #ddd;
+ Polsterung: 30px;
  }
Aktuelle Wirkung

Der Effekt ist nun dieser:

padding wird die Textkürzung unterbrochen

Da padding den internen Raum des Elements einnimmt, dieser Teil des Bereichs sich jedoch innerhalb des Elements befindet, wird er von overflow: hidden nicht beeinflusst.

Lösung

line-height

Wenn line-height angemessen oder groß genug eingestellt ist, kann die padding versetzt werden, um das Ziel zu erreichen, den überschüssigen Teil aus dem sichtbaren Bereich herauszudrücken.

.mein-div {
  Breite: 300px;
  Rand: 10px automatisch;
  Hintergrund: #ddd;
  Polsterung: 30px;
+ Zeilenhöhe: 75px;
} 

Beheben Sie es mit line-height

Diese Methode ist nicht für alle Szenarien geeignet, da nicht alle Stellen eine so große Zeilenhöhe erfordern.

Polsterung ersetzen

padding handelt es sich lediglich um das Hinzufügen von Leerraum zwischen dem Inhalt eines Elements und seinem Rand oder zwischen diesem und anderen Elementen. Hier können Sie die tatsächliche Methode zum Ersetzen betrachten.

Beispielsweise margin . Wenn das Element jedoch wie in diesem Beispiel einen Hintergrund hat, gilt der margin nicht, da margin Randteil des Elements keinen Hintergrund hat.

Sie können stattdessen auch border verwenden.

.mein-div {
  Breite: 300px;
  Rand: 10px automatisch;
  Hintergrund: #ddd;
- Polsterung: 30px;
+ Rand: 30px durchgehend transparent;
} 

border statt padding verwenden

Es überrascht nicht, dass es immer noch seine Grenzen hat. Das heißt, es kommt zu einem Konflikt, wenn das Element selbst eigene Anforderungen an den border hat.

Ränder vom Inhaltscontainer trennen

Dies ist möglicherweise eine universellere Methode, bei der Inhalt und Rand in zwei Elemente getrennt werden, wobei ein Element speziell zur Implementierung des Rands und das andere Element zur Implementierung der Textkürzung verwendet wird. Dies ist leicht zu verstehen. Schauen Sie sich einfach den Code an:

<div Klassenname="mein-div">
  <div Klassenname="truncate-text-4">
    Wie man nicht mischt - Der Knuth Fisher-Yates Algorithmus. Geschrieben von Mike
    James. Donnerstag, 16. Februar 2017. Manchmal sind einfache Algorithmen einfach
    falsch. In diesem Fall mischen ein .... Mit anderen Worten, wenn das Array gescannt wird
    das Element unter
  </div>
</div>

Unsere Stile können gleich bleiben.

Ränder vom Inhaltscontainer trennen

Verwandte Ressourcen

Überlauf: versteckt, untere Polsterung wird ignoriert

Wie kann ich „overflow: hidden“ erzwingen, damit mein rechter Polsterplatz nicht verbraucht wird?

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.