你了解word-wrap和word-break的区别吗？

最新推荐文章于 2021-12-29 17:40:29 发布

天空之枫

最新推荐文章于 2021-12-29 17:40:29 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/sinat_24713805/article/details/53728482

css 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用CSS属性word-wrap与word-break实现文本自动换行，特别适用于需要控制文本显示宽度的情况，并提供了一个简单示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想很多人会在想这两个东西是什么鬼东西，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。我们还是直接看用法吧！

<style>
.text{
   width:200px;
   height:300px;
}
</style>
<p class="text">你看，adadadadadadadadadadadadadadadada<p>

在里面加

   word-wrap:break-word;

就变了

它自动换行了，然而第一行有点空对吧，但没事，我在里面再加

   word-break:break-all;

看是不是变了。

<html>
<head>
<meta charset="utf-8">
<style>
.text{
   width:200px;
   height:300px;
border: 1px solid #000;
 word-wrap:break-word;
 word-break: break-all;
}
</style>
</head>
<body>
<div class="text">你看，adadadadadadadadadadadadadadadada<div>
</body>
</html>

补充：以上只支持英文，中文换行请使用：white-space:pre-wrap