What to do if p in html5 does not wrap?-Front-end Q&A-php.cn

What to do if p in html5 does not wrap?

藏色散人

Release： 2023-01-28 10:01:50

Original

2575 people have browsed it

Solution to p not breaking line in html5: 1. Open the corresponding HTML code file; 2. Find the p tag; 3. Add "p:nth-child(2) {word-break: break -word}" attribute allows the numbers to be automatically wrapped in English.

What to do if p in html5 does not wrap?

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

What should I do if the p in html5 does not wrap?

p tag Chinese and English line-breaking content issues

1. Numbers and English situations

If the content in p is in English, then Line breaks are performed word by word (words are separated by spaces by default). If the length of a word is greater than the width of the p tag. Overflow will occur. The same applies to numbers

2. In the case of Chinese

If the content in p is in Chinese, it will automatically wrap. Even if there are letters or spaces in Chinese (no matter where the letters are).

3. Make numbers and English automatically wrap

by adding word-break: break-word. Can make numbers and English automatically wrap.

<!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>

Copy after login

What to do if p in html5 does not wrap?

Recommended study: "HTML5 Video Tutorial"

The above is the detailed content of What to do if p in html5 does not wrap?. For more information, please follow other related articles on the PHP Chinese website!