div内文字换行的几种情况

最新推荐文章于 2023-09-05 17:29:37 发布

陈福国

最新推荐文章于 2023-09-05 17:29:37 发布

阅读量3.4w

点赞数 13

分类专栏：前端文章标签：陈福国陈福国前端 div内文字换行文字换行 css强制英文换行

本文链接：https://blog.csdn.net/qq_45112637/article/details/114527710

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

div中文字换行问题：

div设置宽度以后，如果div中放的是中文，默认文字超过div宽度会自动换行，如果是英文，则默认是不换行的，即会超出div的宽度继续显示。这种情况，需要我们通过属性值进行强制换行

word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div{
            width: 30px;
            /* height: 30px; */
            border: 1px solid black;
            margin-top: 20px;
        }
        /*只对英文起作用，以字母作为换行依据*/
        .p1 {
            word-break: break-all;
            width: 150px;
        }

        /*--只对英文起作用，以单词作为换行依据*/
        .p2 {
            word-wrap: break-word;
            width: 150px;
        }

          /*只对中文起作用，强制换行*/
        .p3 {
            white-space: pre-wrap;
            width: 150px;
        }

       /*强制不换行，都起作用*/
        .p4 {
            white-space: nowrap;
            width: 10px;
        }

        /*不换行，超出部分隐藏且以省略号形式出现*/
        .p5 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100px;
        }

        
       
    </style>
</head>

<body>
    <div class="p1">hello world hello world hello world hello world hello world</div>
    <div class="p2">hello world hello world hello world hello world hello world</div>
    <div class="p3">hello world hello world hello world hello world hello world</div>
    <div class="p4">hello world hello world hello world hello world hello world</div>
    <div class="p5">hello world hello world hello world hello world hello world</div>

</body>

</html>

使用上述属性一定要指定容器的宽度

陈福国

关注

13
点赞
踩
46

收藏

觉得还不错? 一键收藏
2
评论
div内文字换行的几种情况

div中文字换行问题：div设置宽度以后，如果div中放的是中文，默认文字超过div宽度会自动换行，如果是英文，则默认是不换行的，即会超出div的宽度继续显示。这种情况，需要我们通过属性值进行强制换行word-break:break-all;只对英文起作用，以字母作为换行依据word-wrap:break-word; 只对英文起作用，以单词作为换行依据white-space:pre-wrap; 只对中文起作用，强制换行white-space:nowrap; 强制不换行，都起作用white-
复制链接

扫一扫