终于明白word-break属性——break-all和break-word的区别

时间：2023-03-09 05:53:00
终于明白word-break属性——break-all和break-word的区别

　　 其实一直不明白，也没有认真去想过 word-break 属性的 break-all 和 break-word 有什么区别

　　后来看了一个大神写的一篇博客，写得很详细，看了豁然开朗。

　　所以，我也就不在过多赘述，直接上demo，最后会附上原文链接

　　demo

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .div01,.div02 {

            width: 300px;

        }

        .div01 {

            word-break: break-all;

        }

        .div02 {

            word-break: break-word;

        }

    </style>

</head>

<body>

    <div class="div01">show me the money give me the money</div>

    <div class="div02">show me the money give me the money </div>

</body>

</html>

　　下面截图是上面demo的运行结果

　　终于明白word-break属性——break-all和break-word的区别

　   第一行的英文使用了：word-break: break-all;

　   第二行的英文使用了：word-break: break-word;

　　共同点：

　　都是可以对英文单词进行断句换行

　　不同点：

　　word-break:break-all  紧接着前面的单词，并强行断句换行（比如上面截图中的 money 是紧跟着前面的 the）

　　word-break:break-word  不会紧接着前面的单词，而是整个单词直接另起一行 （比如上面截图中的 money，没有紧跟前面的 the，直接换行）

　　 注：word-break上面的2个属性不仅适用于英文单词，还适用于数字；　　　

　  补充：word-break和word-wrap属性的区别　

　  原文链接：https://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

相关文章