Comment afficher du texte en lignes avec CSS-tutoriel CSS-php.cn

Comment afficher du texte en lignes avec CSS

coldplay.xixi

Libérer： 2023-01-03 09:29:20

original

5950 Les gens l'ont consulté

Comment afficher du texte en lignes avec CSS : 1. Utilisez l'attribut [writing-mode], la syntaxe est [writing-mode:lr-tb ou writing-mode:tb-rl] ; objets texte Le paramètre de largeur ne peut organiser que la distance en largeur du texte suivant.

Comment afficher du texte en lignes avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Méthode CSS pour afficher le texte en lignes :

Méthode 1 : Utiliser l'attribut writing-mode

Syntaxe :

writing-mode:lr-tb或writing-mode:tb-rl

Copier après la connexion

Paramètres : lr-tb : de gauche à droite, de haut en bas ; tb-rl : de haut en bas, de droite à gauche.

    <!DOCTYPEhtml>
    <html>
    <head>
    <title>test</title>
    <metacharset="UTF-8">
    </head>
    <style>
    .one{
    margin:0auto;
    height:140px;
    writing-mode:vertical-lr;/*从左向右从右向左是writing-mode:vertical-rl;*/
    writing-mode:tb-lr;/*IE浏览器的从左向右从右向左是writing-mode:tb-rl；*/
    }
    </style>
    <body>
    <divclass="one">十轮霜影转庭梧，此夕羁人独向隅。
    未必素娥无怅恨，玉蟾清冷桂花孤。</div>
    </body>
    </html>

Copier après la connexion

Cette méthode a une mauvaise compatibilité et n'est prise en charge que dans le navigateur IE, elle n'est donc pas recommandée. Je ne la présenterai pas ici. Si vous souhaitez en savoir plus, vous pouvez vous référer au manuel en ligne CSS.

Méthode 2 pour l'affichage vertical du texte CSS :

Définir la largeur de l'objet texte ne peut organiser que la distance en largeur du texte suivant, de sorte que le texte ne puisse pas insérer deux caractères sur une seule ligne. Le retour à la ligne automatique du texte crée automatiquement un besoin de composition verticale.

    <!DOCTYPEhtml>
    <html>
    <head>
    <title>test</title>
    <metacharset="UTF-8">
    </head>
    <style>
    .one{
    width:52px;
    margin:0auto;
    line-height:56px;
    font-size:50px;
    }
    </style>
    <body>
    <divclass="one">中秋月</div>
    </body>
    </html>

Copier après la connexion

Remarque : word-wrap:break-word;/*Vous devez ajouter cette phrase en anglais pour renvoyer automatiquement la ligne*/