p标签中英文换行内容问题

最新推荐文章于 2024-07-03 11:37:41 发布

语轻星子

最新推荐文章于 2024-07-03 11:37:41 发布

阅读量2.7k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_43616690/article/details/117826152

版权

1.数字、英文的情况

p中的内容如果是英文，则会按单词（默认按空格来分隔单词）来进行换行。如果一个单词长度大于p标签的宽度。则会发生溢出。数字同理

2.中文的情况

p中的内容如果是中文，则会自动换行。即便中文中有字母或者空格（无论字母处在什么位置）。

3.使数字、英文自动换行

通过添加word-break: break-word。可以使得数字、英文自动换行。

<!DOCTYPE html>
<html lang="en">

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

在这里插入图片描述

语轻星子

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
p标签中英文换行内容问题

1.数字、英文的情况p中的内容如果是英文，则会按单词（默认按空格来分隔单词）来进行换行。如果一个单词长度大于p标签的宽度。则会发生溢出。数字同理2.中文的情况p中的内容如果是中文，则会自动换行。即便中文中有字母或者空格（无论字母处在什么位置）。3.使数字、英文自动换行通过添加word-break: break-word。可以使得数字、英文自动换行。<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫