Wie lässt sich Text um abgerundete Divs fließen lassen?

Verbesserung der Textplatzierung in abgerundeten Divs

Das Erstellen abgerundeter Divs, die Text nahtlos aufnehmen, kann mithilfe von CSS-Techniken erreicht werden. Standardmäßig zeigen abgerundete Divs jedoch häufig Text im quadratischen Format an.

Aktuelle Situation:

Wie im bereitgestellten JSFiddle (http://jsfiddle.net) gezeigt /kUJq8/) erzeugt das folgende CSS ein rundes Div mit quadratischem Text:

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

Lösung 1: Shape-Outside

Moderne Browser unterstützen das Shape-Outside Eigenschaft, die eine direkte Lösung zum Umschließen von Text um komplexe Formen bietet. Für eine kreisförmige Form wäre die Syntax:

div {
    width: 320px;
    height: 320px;
    shape-outside: circle(50%);
    background: #333;
    color: #FFF;
}

Hinweis: Browserunterstützung für „Shape-outside“ sollte in Betracht gezogen werden.

Lösung 2: Pseudo Elementverläufe

Alternative Methoden umfassen die Verwendung von Bildern oder Verläufen, um die Kreisform zu definieren. Beim letztgenannten Ansatz werden vier Pseudoelemente verwendet:

div:not([class]) {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div[class]:before {
  /* ... */
}

div[class][id]:before {
  /* ... */
}

div[class]:after {
  /* ... */
}

div[class][id]:after {
  /* ... */
}

Durch die Verwendung sorgfältig positionierter radialer Farbverläufe erzeugen diese Pseudoelemente effektiv die Illusion einer Kreisform. In Kombination mit den abgerundeten Ecken des Haupt-Divs wird der Text wie gewünscht um den Kreis umbrochen.

Das obige ist der detaillierte Inhalt vonWie lässt sich Text um abgerundete Divs fließen lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!