CSS样式word-wrap和word-break的区别

最新推荐文章于 2024-08-29 09:49:18 发布
转载 最新推荐文章于 2024-08-29 09:49:18 发布 · 688 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://www.cnblogs.com/dashenjileige/p/10833340.html
标签
#html5 #css3
本文详细解释了CSS中的word-wrap和word-break属性的区别及其应用场景。word-wrap主要用于控制文本换行，而word-break则用于控制单词的断开位置。通过对比normal和break-all等不同取值的效果，帮助开发者更好地理解并应用这两个属性。

CSS样式word-wrap和word-break的区别

word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

normal只在允许的断字点换行（浏览器保持默认处理）。
break-word在长单词或 URL 地址内部进行换行。

word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句。

normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。

当浏览器默认的时候，不加word-wrap或word-break，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去。

如：

在这里插入图片描述

添加word-break：break-all 后

在这里插入图片描述

word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是，它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

而word-break:break-all断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。

暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。

总之，如果您想更节省空间，那就用word-break:break-all。

readychenxxy
关注
word-wrap与word-break 属性的概述及浏览器默认处理
12-13
一、浏览器默认处理文本换行 现在的浏览器对文本的换行处理还是比较合理的，当文字超过容器宽度时会自动换行，那么它是怎么自动换行的呢？即：当一行的末尾容纳不下下一个文字或单词时，就会自动换行， 英文单词不会被截断，相当于一段默认的css: 复制代码代码如下:{ word-wrap: normal; /*浏览器对文本默认的自动换行处理*/} 如图：浏览器自动换行文本      二、break-word属性值 当然在网页排版中也会遇到一些特殊情况，例如：某个单词(某品牌的英文名称)够长，而容器宽度较小以至于容纳不下，那么单词就会溢出容器，你可能就会想到下面一段css代码： 复制代码代码如下:{
CSS3中word-break和word-wrap有什么区别？
xiaoxijinger的博客
07-09 1306
大家都知道在CSS3中增加了很多新的属性，其中word-break和word-wrap就是用来给文本换行使用的，但是两者有什么区别很多小伙伴都不是很清楚。今天小千就来告诉你他们究竟有什么不同，应该用在哪里。 word-break word-break它的属性值一共有3个，其中的几个属性值的含义具体解释如下： normal:表示默认值，即默认的的换行规则。 break-all:表示强行换行，意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep-all: 也表示换行，但不允许文本中的单词换行，只能
【CSS3】的语法【九】
lianafany的博客
04-09 1510
在定义字体的时候，可以将字体定义为斜体字或者粗体字。在使用服务器端字体的时候，需要根据是斜体还是粗体，使用不同的字体文件。显示客户端本地的字体@font-face属性不仅可以用于显示服务器端的字体，也可以用来显示客户端本地的字体。举个例子来说，在客户端本地已经安装了Arial字体系列（font-family）。Arial字体系列由以下几个字体组成。·Arial在浏览器中，当使用Arial字体系列显示文字的正体与粗体时，分别使用Arial字体与Arial Bold字体。
每日一学—CSS3 word-wrap 属性
黛琳ghz的博客，期待你的关注。
05-07 1万+
word-wrap 属性是 CSS3 中的一个文本换行属性，用于指定在何处应该发生文本换行。 word-wrap 属性有两个可选值： normal：默认值。表示只在单词或连字符处换行。 break-word：表示允许在任意字符内换行，以避免当单词或字符串太长以至于无法适应其容器时出现的水平滚动条。
彻底搞懂word-wrap,word-break,white-space
m0_45093055的博客
10-26 1215
彻底搞懂word-wrap,word-break,white-space
兼容IE和FF的换行CSS推荐样式---word-wrap同word-break的区别
f002489的专栏
06-23 198
http://www.webshu.net/jiaocheng/web/CSS/200804/7747.html   http://xy.zhubajie.com/html/2009/03-10/192862.html   http://edu.codepub.com/2009/1022/16612.php   http://www.west263.com/info/html/wang...
兼容IE和FF的换行CSS推荐样式
StoneOK07的专栏
11-07 1148
转载：http://www.cnblogs.com/arix04/archive/2009/05/11/1454123.html 本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式，详细介绍了word-wrap同word-break的区别。 兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hi
换行word-wrap与word-break兼容IE和FIREFOX -----设计师零张
weixin_30838921的博客
09-01 113
word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。word-break是控制是否断词的。normal是默认情况，英文单词不被拆开。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。keep-all，是指Chinese, Japanese, and Korean不...
word-break、word-wrap、white-space的区别
qq_41818857的博客
02-04 449
浏览器本身都带有让文本自动换行的功能。 对西方文字来讲，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的当中换行。 对中文来讲，可以在任何一个中文后面进行换行。（不可能让标点符号位于一行文字的行首，通常将标点符号以及它前面的一个文字作为一个整体来统一换行） 我们可以自己选择在哪换行或者不换行： 1. word-break word-break属性用来自己决定自动换行的方法，以下是word-...
CSS 单词折行 word-wrap属性
歪脖先生的博客
02-14 3244
单词折行word-wrap属性用来设置是否允许长单词或 URL 地址在容器的边界处自动换行，取值为 normal | break-word，默认值为 normal。normal 表示只允许在半角空格或连字符的地方换行，如果没有半角空格或连字符，则长单词或 URL 地址会撑大容器或溢出到容器的外面；break-word 则表示允许长单词或 URL 地址在容器边界处自动换行，显示到下一行。为了演示不同...
word-wrap控制长单词或URL地址换行
qq_36470686的博客
09-23 2421
有时候文本内容中包含了特别长的单词或特别长的URL地址——URL地址既不包含半角空格，也不包含连字符，因此当浏览器窗口较窄时，浏览器下部将会出现滚动条，用户只有通过拖动滚动条才能看到全部内容。 如果需要改变浏览器的默认行为，则可通过word-wrap属性进行设置。该属性支持如下两个值。 normal:靠浏览器默认规则进行换行。 break-word:设置允许在单词中间换行。 为了让浏览...
word-wrap - 灵活的文本换行库
gitblog_00066的博客
06-02 550
word-wrap - 灵活的文本换行库 word-wrap 是一个用于 JavaScript 的小巧且强大的库，它能帮助您在指定长度下自动换行文本，确保您的代码或文档始终保持整洁易读。 项目介绍 word-wrap 提供了一种简单的方法来对长字符串进行处理，使其适应不同宽度的需求。无论是在命令行工具、终端应用还是HTML生成中，都能派上大用场。只需一行代码，就能实现优雅的文本换行效果。 技术分析...
​‌‌word-break和‌word-wrap的基本定义和功能​
最新发布
m0_62782752的博客
08-29 1215
‌是一个计算机语法，用于设置或检索对象内文本的字内换行行为。它主要用于处理长单词或字符串在容器内换行时的行为，尤其是在处理多种语言时更为重要。‌属性用来标明是否允许浏览器在单词内进行断句。它主要用于防止当一个字符串太长而找不到其自然断句点时产生溢出现象。假设有一个容器宽度为300px，包含一段英文文本“congratulation”。‌更适合在容器宽度不足时强制换行并断句。‌更适合保持单词的完整性，而‌。通过这些例子可以看出，‌。
Word wrap在计算机代表的含义（自动换行）
小丁的博客
04-07 1561
在计算机科学和文本处理中，“wrap”或“word wrap”是指当文本行达到容器的边缘时，自动将剩余文本移至下一行的过程。：在编程中，“wrap”可以指将某个值限制在特定范围内，或者将函数或方法的调用封装在另一个函数或方法中。如果成功，则返回折行后的字符串；：在时尚或设计中，“wrap”可能指的是一种特定的穿衣风格或设计元素，比如“wrap dress”，它指的是一种环绕身体、强调女性身材曲线的连衣裙。：在数学或物理的上下文中，“wrap”可能指的是一个对象或现象围绕另一个对象旋转或移动。
word-wrap长单词与URL地址自动换行
qq_41648132的博客
04-10 2147
word-wrap长单词与URL地址自动换行word-wrap属性的属性值：1）normal 浏览器保持默认的处理方式，只有在半角空格或者是连字符的地方进行换行2）break-word 浏览器可以在长单词或URL地址内部进行换行案例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
CSS英文字符串换行（word-break: break-all 或者 word-wrap）
热门推荐
黄彪博客
01-28 2万+
文章参考 英文强制换行css 使用css强制英文单词断行代码 问题描述 在工作中，给表单的某个字段添加描述信息，于是，测试就输入了’dddddd…(500个)’，查看详情的时候，就出现了横向滚动条，这样就不能直观的显示，于是提了bug 解决过程 遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化 请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于
彻底搞懂word-break、word-wrap、white-space
weixin_45439337的博客
04-21 976
最后总结一下三个属性white-space，控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-lineword-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-allword-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行，是word-break的补充，它有两个值：normal | break-word。
word-wrap和word-break的区别
qq_41549657的博客
08-18 1616
你真的了解word-wrap和word-break的区别吗？ 这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。 那它们到底是什么呢？我在mozilla的官网上找到如下的解释： word-wrap word-break 我们看到两个解释中都出现了 break lines within words
文字换行 word-wrap word-break
秋来九月八
01-15 5059
前端渲染文字是最常见的应用场景，可有的时候，要求能够识别字符串中的换行。 后端出来的数据可能是这样的，中间有一个回车符号，要求前端能够换行显示。 如果不处理的话 是没办法识别回车符号的，无法正确显示。 对于前端来说，用css来控制是最简单的方式。 .scf-textarea-text { white-space: pre-wrap; word-wrap: break-word; word-break: break-all; } white-space 用来控制文本字符串类的空白和换行 no
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值