word-break: break-all和word-wrap:break-word的区别

来源：互联网发布：生活的乐趣知乎编辑：程序博客网时间：2024/06/11 08:00

看下代码的区别就一目了然了

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div>        <p style="background:blue; width:200px; color:#fff;word-break: break-all;">word-wrap和word-break的区别吗?NNNNNNNNNNN1111111111111111111111</p>        <p style="background:blue; width:200px; color:#fff; word-wrap:break-word;">word-wrap和word-break的区别吗?NNNNNNNNNNNNNNNNNNNNNNNNNNNNN1111111111111111111111111</p>    </div></body></html>

效果图
这里写图片描述

word-break: break-all正如其名字，所有的都换行。毫不留情，一点空隙都不放过；
word-wrap:break-word 如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现空白的情况

阅读全文

0 0