Comment enrouler du texte autour d'un div arrondi à l'aide de CSS ?

Comment conserver le texte à l'intérieur de divisions arrondies à l'aide de CSS

Envelopper du texte autour d'une division ronde peut être délicat, ce qui entraîne souvent un texte au carré . Ce problème peut être résolu à l'aide de diverses techniques :

Propriété Shape-Outside

Shape-outside est une propriété CSS moderne qui définit une forme autour de laquelle le contenu en ligne doit s'enrouler. En adaptant cette forme, vous pouvez créer des bords arrondis pour votre texte. Cependant, la prise en charge par le navigateur de la forme extérieure est limitée.

Dégradé d'arrière-plan

Une autre approche consiste à utiliser un arrière-plan à dégradé radial pour créer une forme circulaire. Pour y parvenir, appliquez un dégradé radial avec transparence à l’extérieur du cercle souhaité, permettant au texte de circuler librement à l’intérieur de celui-ci. Cette technique nécessite quatre pseudo-éléments pour former la forme.

Solution de pseudo-éléments

Semblable à la méthode du dégradé d'arrière-plan, cette technique utilise des pseudo-éléments pour créer un cercle en utilisant des dégradés radiaux. Cependant, au lieu d'utiliser la transparence, les dégradés sont dessinés en dehors du périmètre du cercle, éloignant ainsi le texte des bords.

Mise en œuvre

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

div[class]:before {
    content: '';
    float: left;
    clear: left;
    height: 5em;
    width: 5em;
    background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

/* ... Remaining pseudo-element styles and additional styling */

Remarque : La prise en charge par le navigateur de la forme extérieure est essentielle pour utiliser cette technique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!