word-break:break-all; 和word-wrap:break-word;

最新推荐文章于 2024-01-26 13:49:36 发布

原创最新推荐文章于 2024-01-26 13:49:36 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #UI

个人小笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS中word-break:break-all;与word-wrap:break-word;的区别及应用场景。前者允许在单词内部换行，后者则是在单词间自动换行。

接触UI 时间尚短，对于word-break:break-all; 和word-wrap:break-word; 也并没有留意过有什么不同，忽然要区分的时候有点不清楚

在此记录一下，留给以后再查看

word-break:break-all; 和 word-wrap:break-word;都是用来对容器中的内容换行的

word-break:break-all; 是将长文本内容，在此行显示宽度不够时，行内断开，分两行显示 (词内换行)

word-wrap:break-word; 是将长文本内容，在此行显示宽度不够时，整体在下一行显示 (自动换行)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zyjia_study

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 文本出现空格转换为换行显示

一碗清深的博客

11-29

922

日期和时间分别换行显示示例

浅析word-break work-wrap的区别

12-13

语法：word-break: normal|break-all|keep-all; 默认值 normal 继承性 yes 版本 css3 Javascript语法 object.style.wordBreak="keep-all" 值描述 normal 使用浏览器默认的换行规则。 break-...

参与评论您还未登录，请先登录后发表或查看评论

word-break:break-all和word-wrap:break-word区别总结

12-08

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于： 1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。 2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，

【转】你真的了解word-wrap 和 word-break 的区别吗

weixin_30871701的博客

04-15

1109

【转】你真的了解word-wrap 和 word-break 的区别吗这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。那它们到底是什么呢？我在...

word-wrap: break-word;与word-break: break-all;文本自动换行

m0_37238192的博客

02-23

355

word-wrap: break-word;与word-break: break-all;文本自动换行 word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该...

word-wrap:break-word 与 word-break:break-all 区

weixin_34313182的博客

07-10

178

word-wrap:break-word 是优先断单词（根据空格判断单词），而 word-break:break-all 完全没有把文字当单词看待，在它眼里，都是一块一块的字符。这就会造成这么两情况：假如一个 p 有 100px 宽，而其中有很长一段无空格的英文字符，完全超过 100px 了，此时二者表现相同，都是在边界处将字符截断。假如一个 p 有 100px 宽，其中有段文字既有中文也...

自动换行word-break:break-all和word-wrap:break-word的区别

xiaoyatou_00的专栏

01-12

757

<br />word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。<br />它们的区别就在于：<br />1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。<br />2，

CSS word-wrap同word-break的区别

12-11

兼容 IE 和 FF 的换行 CSS 推荐样式最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 IE 下没有任何...

word-wrap与word-break 属性的概述及浏览器默认处理

12-13

二、`word-wrap: break-word` 属性值在某些特殊情况下，比如长单词（如品牌名）或者连续的非空格字符序列，可能会导致文本溢出容器。这时，可以使用 `word-wrap: break-word;` 来处理这种情况： ```css word-wrap...

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

u010552788的专栏

06-01

2271

最开始我们说了，word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是——用了word

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

我的博客

05-19

1125

一、自动换行 word-break:break-all和word-wrap:break-word 一般这两个属性都会加上 height-auto;white-space:normal; 共同点：word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。不同点： 1.word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断

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

赵乘风_i

04-23

950

word-break:break-allword-wrap:break-word相同之处：都是换行不同：word-wrap :break-word 以单词换行，可能不对齐，会出现空白word-break:break-all 所有都换行，是以div宽度进行换行的，可能会影响单词的完整性如果遇到没有空格全英文，因为没有遇到单词，使用了word-wrap:break-word ，也没有...

Css属性 word-break:break-all和word-wrap:break-word的区别

蓝胖子的博客

01-26

3517

Css属性 word-break:break-all和word-wrap:break-word的区别

word-wrap: break-word; 的使用

AliceWu的博客

08-02

3370

word-wrap: normal|break-word; 属性值：例子：

word-wrap和word-break

Daisy__xu的博客

04-20

691

在近期的项目中遇到一个小小的问题，文本太长导致自动换行，出现了好多空白区域，于是作为小白的我，百度的一下，发现了解决问题的办法。下面我们就来探讨探讨： 1、word-wrap和word-break 1.1、css中word-wrap属性用来表明是否允许浏览器在单词中进行断句，就是俗称的换行 1.2、css的word-break用来标明该怎么样进行断句

css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow

weixin_44867717的博客

03-02

3733

css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow: ellipsis 1、文字换行元素明明设置了宽度,但是竟然溢出了,添加上以下代码让其自动换行 .wg-width{ display:inline-block; width:320px; line-height: 18px; word-wrap: break-word //自动换行 } 2、

CSS 自动换行 word-break:break-all和word-wrap:break-word

姬豪杰的专栏

05-19

5832

word-wrap:break-word;word-break: break-all中文

最新发布

03-21

### 使用 `word-wrap` 和 `word-break` 实现换行效果 #### 属性解释 `word-wrap` 和 `word-break` 是 CSS 中用于控制文本换行行为的重要属性。 - **`word-wrap: break-word;`** 此属性主要用于处理超出容器宽度的内容，允许长单词或 URL 被拆分到下一行。它仅在必要时才会打断单词[^2]。 - **`word-break: break-all;`** 这一属性更加激进，会在任何字符处强行断开单词，即使不需要打破单词也会如此操作。这种特性非常适合包含大量英文或其他非亚洲语言的场景[^4]。当应用于中文环境时，两者的区别主要体现在是否严格遵循语义分割上： - 对于纯中文内容来说，因为汉字之间不存在自然间隙（不像英文字母间存在空格），所以无论是采用 `word-wrap: break-word;` 或者是 `word-break: break-all;` 都能够正常工作并按需完成换行任务[^3]。然而需要注意的是，在混合型文档——即既含有中文又夹杂着较长不可分割单元比如技术术语、链接地址等情况之下，则应仔细权衡选用哪一种策略更为合适[^1]。以下是具体的应用实例以及代码展示部分: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Word Wrap & Break Example</title> <style> .example { width: 200px; border: 1px solid black; margin-bottom: 10px; } /* Using word-wrap */ .use-word-wrap { white-space: pre-line; word-wrap: break-word; } /* Using word-break */ .use-word-break { white-space: normal; word-break: break-all; } </style> </head> <body> <div class="example use-word-wrap">这是一个非常长的单个词语aaaaaaaaaaaaaaaabbbbbbbbbbbbcccccccccccddddddddddeeeeeeeeee。</div> <div class="example use-word-break">这是另一个例子：http://www.example.com/verylongurlthatneedstobebrokenintopieces.</div> </body> </html> ``` 以上HTML片段展示了两种不同方法的实际运用情况。第一个 div 利用了 `word-wrap: break-word;` 来优雅地处理超长字符串；而第二个则通过设置 `word-break: break-all;` 达到了同样的目的却可能破坏某些特定场合下的可读性[^5]。 ### 结论综上所述，在实际开发过程中可以根据项目需求灵活选择合适的解决方案。如果是针对一般性的网页布局设计，并且希望保持较好的用户体验，则推荐优先考虑使用 `word-wrap: break-word;` 。但如果面对特殊情形如表格内部单元格溢出等问题，则可以尝试引入更加强硬的方式 —— 即启用 `word-break: break-all;`.