Que faire si p en HTML5 ne s'enroule pas ?-Questions et réponses frontales-php.cn

Que faire si p en HTML5 ne s'enroule pas ?

藏色散人

Libérer： 2023-01-28 10:01:50

original

2576 Les gens l'ont consulté

Solution pour que p ne coupe pas la ligne en html5 : 1. Ouvrez le fichier de code HTML correspondant ; 2. Recherchez la balise p ; 3. Ajoutez "p:nth-child(2) {word-break: break-word}" Le L'attribut permet aux nombres d'être automatiquement enveloppés en anglais.

Que faire si p en HTML5 ne s'enroule pas ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur DELL G3

Que dois-je faire si le p en HTML5 ne s'enroule pas ?

Problèmes de contenu de retour à la ligne en chinois et en anglais

1. Dans le cas des chiffres et de l'anglais

Si le contenu de p est en anglais, il sera renvoyé à la ligne par mot (les mots sont séparés par des espaces par défaut). Si la longueur d'un mot est supérieure à la largeur de la balise p. Un débordement se produira. Il en va de même pour les chiffres

2 Dans le cas du chinois

Si le contenu de p est en chinois, il sera automatiquement renvoyé. Même s'il y a des lettres ou des espaces en chinois (peu importe où se trouvent les lettres).

3. Faites en sorte que les chiffres et l'anglais s'enroulent automatiquement

en ajoutant word-break : break-word. Peut faire en sorte que les chiffres et l'anglais soient automatiquement enveloppés.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        figure {
            display: flex;
            width: 100vw;
            height: 100vh;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        img {
            width: 20vw;
        }
        p {
            width: 30%;
            height: 20%;
            /* word-break: break-word */
            /* text-align: center; */
        }
        p:nth-child(2) {
            word-break: break-word
        }
    </style>
</head>
<body>
    <figure>
        <p>budapsetBund123456789456132123afhuoeaewoerhaib faFingjfllkfhabjkalshfowurhebjkfais
            thecapticaljjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
        </p>
        <p>1111111111111111111111111111111111111111111111 22222222222222222222222222222
            22222222222222222222222222
        </p>
        <p>
            a小花花蓉儿安委办挼恩爱反驳奥委会蓉儿五把UI阿拉绒布李规格a 爱好IE容纳foe把UI老人会爸爸非哦啊啊哦环绕为比方那部分巴洛克不发货
        </p>
    </figure>
</body>
</html>

Copier après la connexion

Que faire si p en HTML5 ne senroule pas ?