Maison > Article > interface Web > Comment afficher du texte en lignes avec CSS

Comment afficher du texte en lignes avec CSS

coldplay.xixioriginal: 2021-03-11 16:35:155894parcourir

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.

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

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>

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>

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

Tutoriels associés recommandés : Tutoriel vidéo CSS

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!

css css3 break 对象 word

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment ajouter dynamiquement des styles CSS dynamiques dans jqArticle suivant：Comment ajouter dynamiquement des styles CSS dynamiques dans jq

Articles Liés

Voir plus