关于 CSS 的英文单词换行 (word-break 和 word-wrap 的区别)

最新推荐文章于 2023-06-22 00:52:03 发布
最新推荐文章于 2023-06-22 00:52:03 发布
阅读量8.4k 收藏 5
点赞数 3
分类专栏： 阿哈哈哈大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bule_daze/article/details/103837307
版权

转载自 AlloyTeam：http://www.alloyteam.com/2016/05/css-word-for-word-breaker-do-you-really-understand/

🧙‍♀️ 问：如何强制（自动）中、英文换行与不换行？
👩‍🎓 答：
  1. word-break:break-all; 只对英文起作用，以字母作为换行依据。
  2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据。
  3. white-space:pre-wrap; 只对中文起作用，强制换行。
  4. white-space:nowrap; 强制不换行，都起作用。
  5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）。

🍌 word-break

word-break: normal | break-all | keep-all;
  • normal：使用浏览器默认的换行规则。
  • break-all：允许在单词内换行
最低0.47元/天 解锁文章
莫亓
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
015day(css控制单词换行的属性，css设置中英文大小写的属性，背景渐变)
w296932099的博客
07-29 1276
一、css控制单词换行的属性 1、word-break自己决定自动换行的处理方法 ①word-break：normal:使用浏览器默认的换行规则。(英文) ②word-break：keep-all:不允许中文字断开，以符号作为换行的标志。 ③word-break：break-all:允许在单词内换行，可以强行截断英文单词，达到词内换行效果。 2、word-wrap用来标明是否允许浏览器在单词内进行断句 ①word-wrap：normal 默认值。 ②word-wrap：break-word：.
单词自动换行 css,CSS让英文单词的自动换行的方法介绍
weixin_34837898的博客
08-03 6383
CSS让英文单词的自动换行在制作网页过程中，css样式编写中，可能会遇到文字换行的问题，其中英文换行可能会困扰着很多初学者，而今天我就这个问题进行相应的阐述，学过css的朋友应该都知道，控制文字是否换行可以直接使用css中的word-break来进行调整，但是对于英文来说，我们要让其能满足所有浏览器的需要，仅仅这一个属性是不够的。根据我个人所了解的一些资料显示，英文过多，过长，不仅仅影响到表格，还...
CSS英文字符串换行（word-break: break-all 或者 word-wrap）
黄彪博客
01-28 2万+
文章参考 英文强制换行css 使用css强制英文单词断行代码 问题描述 在工作中，给表单的某个字段添加描述信息，于是，测试就输入了’dddddd…(500个)’，查看详情的时候，就出现了横向滚动条，这样就不能直观的显示，于是提了bug 解决过程 遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化 请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于
css实现文字的按单词换行
『程序员·小李』的博客
12-28 5338
当文字一行展示不开，需要换行展示的时候，我们可以指定不要分割英文字母，而是按照单词进行换行。 示例 <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> 样式 word-wrap: break-word; p.tes
css强制换行
高先生的猫
11-19 797
强制换行用white-space的normal，pre-wrap，pre-line换行，即使有overflow:hidden;text-overflow:ellipsis;也不影响换行。 值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似html中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符序...
CSS中英文换行
sunluyi的博客
06-29 2554
中英文自动换行 word-break:break-all;只对英文起作用，以字母作为换行依据 word-wrap:break-word; 只对英文起作用，以单词作为换行依据 white-space:pre-wrap; 只对中文起作用，强制换行 white-space:nowrap; 强制不换行，都起作用 p{ word-wrap: break-word; white-space: normal; word-break: break-all; } //不换行 .wrap { white-s.
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
12-02
总的来说，CSS3的`word-wrap`属性提供了一种有效的方式来处理英文文本的换行问题，使得网页设计更加灵活且易于维护。在创建响应式布局或者处理长字符串时，它是必不可少的工具之一。了解并熟练运用这个属性，可以...
css 英文换行 css(word-wrap/break)使纯英文数字自动换行
12-13
当面对纯英文或数字内容自动换行的问题时，一种常见的解决方案是在CSS中同时使用`word-wrap`和`word-break`属性，例如： ```css .container { word-wrap: break-word; word-break: break-all; } ``` 这样的设置...
css word-break word-wrap 前台显示自动换行
09-25
`word-break` 和 `word-wrap` 是两个非常重要的CSS属性，它们主要用于处理文本内容在容器内的换行规则，特别是在处理非标准长度的单词或字符串时。在描述中提到的场景是在一个`table`元素中应用这些样式，以确保内容...
css文本换行属性word-wrap和white-space使用总结
01-19
word-break:break-all和word-wrap:break-word表示强制换行，前者若英文字符过长自动截断，后者整个英文单词会换行！ 而而我常会这样用： 复制代码代码如下: word-wrap:break-word; overflow:hidden; IE 下没有...
英文强制换行css 使用css强制英文单词断行代码
12-13
在做企业站的英文版的时候，英文单词由于剩下的空间不足，导致整个单词都换行，造成单词之间的空隙太大。如下图： 使用css属性word-break:break-all; 后的效果：如下图：   强制不换行 复制代码代码如下:{ white-space:nowrap; } 自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行： overflow:hidden 隐藏 white-space：normal 默认 pre 换行
text-overflow: ellipsis；单行，多行文本溢出显示 . . .
热门推荐
前端小狮的博客
04-11 3万+
常见的单行文本溢出显示省略号 写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/ti..
Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法
colin5210的博客
06-22 6990
1、Css强制英文或数字自动换行 2、让中文按关键词或标签换行 3、Css强制中文不自动换行 4、Css强制中文不自动换行并自动隐藏； 5、Css中英文或数字的超出部分自动省略号…； 6、Css中word-wrap、word-break、white-space、overflow、text-overflow的用法讲解；
文字换行 word-wrap word-break
秋来九月八
01-15 4164
前端渲染文字是最常见的应用场景，可有的时候，要求能够识别字符串中的换行。 后端出来的数据可能是这样的，中间有一个回车符号，要求前端能够换行显示。 如果不处理的话 是没办法识别回车符号的，无法正确显示。 对于前端来说，用css来控制是最简单的方式。 .scf-textarea-text { white-space: pre-wrap; word-wrap: break-word; word-break: break-all; } white-space 用来控制文本字符串类的空白和换行 no
CSS 单词折行 word-wrap属性
歪脖先生的博客
02-14 2762
单词折行word-wrap属性用来设置是否允许长单词或 URL 地址在容器的边界处自动换行，取值为 normal | break-word，默认值为 normal。normal 表示只允许在半角空格或连字符的地方换行，如果没有半角空格或连字符，则长单词或 URL 地址会撑大容器或溢出到容器的外面；break-word 则表示允许长单词或 URL 地址在容器边界处自动换行，显示到下一行。为了演示不同...
css文字换行
m0_47843571的博客
12-25 1万+
字母换行：word-wrap: break-word; 单词换行：word-break: break-all; 文字换行：white-space:pre-wrap;
css中英文单词换行的问题
my466879168的博客
07-25 8101
单词换行的问题 在项目中有时候会遇到英文很长的句子，然后当div剩下的部分不足以放下一个单词的时候，单词就会换行显示，这样的话尾部就会空了很大的地方显得很不好看 解决方法 可以通过两个css属性来实现这个需求： word-wrap:break-word; word-break:break-all; word-wrap word-wrap用来控制换行，有两种值： + normal + break-word(这个值用来强制换行的，内容将在边界内换行，在中文中是没有任何问题，英文语句也是没有任何问题，但是对于很
css 英文换行且单词始终保持在一起
u011280778的博客
02-14 3622
方法一： 想让单词不换行用 word-break:keep-all; white-space:nowrap;   方法二： dispaly:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;   a换行且a内文本不换行 display:block;或者display:inline-bl...
css 英文单词换行
最新发布
10-18
CSS 英文单词换行可以使用 word-break 或者 overflow-wrap 属性来实现。其中，word-break 属性用于指定单词如何被分割换行，而 overflow-wrap 属性用于指定在单词内部如何换行。 例如，可以使用以下 CSS 代码来实现英文单词换行： ``` p { word-break: break-all; overflow-wrap: break-word; } ``` 这样，当一个英文单词超出了容器的宽度时，它会被自动分割成多个部分，并在容器的下一行继续显示。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值