他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)white-space、word-wrap和word-break区别white-space、word-wrap和word-break区别源码时代百家号今天我们来系统的学习一下CSS中文本换行属性的用法，主要是针对前期学习属性时，同学们对相关属性理解不透，所以今天源码时代H5前端培训讲师这次把相关属性抽出来，给大家科普一下！系统的总结一下相关属性之间的区别。首先，我们在CSS中最常见的文本换行相关属性有以下三个：white-space，word-wrap，word-break那么我们先来看一下这几个属性分别表达的意思吧：1. white-space作用：作用于空格和回车，用于控制空格是否进行合并，回车是否进行换行，如果句子过长是否在空格处换行常用参数说明：1. normal:多个连续的空格会被合并为一个，回车会被忽略，同时句子如果太长，会在空白处折行2. Nowrap:强制在同一行显示文本，合并多余的空白，除非遇到br才换行运用场景：主要用于固定宽度的标题，水平方向的文本过长加省略号的操作注意：如用使用了white-space为nowrap,设置其它强行折行的word-break将不生效，需要修改white-space为normal.2. word-space作用：主要用于单词上，控制水平方向上的超长单词是否折行常用参数说明：Normal:单词超长也不可折行，会产生溢出Break-word:单词超长会折行3. word-break作用：防止页面中出现连续无意义的长字符打破布局常用参数说明：normal:如果是中文则到边界处的汉字换行，如果是英文整个词换行注意：如果出现英文字符长度超过边界，则后面的部分将撑开边框，如果边框为固定属性，则后面部分将无法显示break-all:强行换行，将截断英文单词keep-all:不允许字断开以上内容做为使用时的理论前提，后期在使用中希望小伙伴们多加注意些！本文章由源码时代H5前端学科讲师原创!转载须注明出处(http://www.itsource.cn)!感谢大家的配合!本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。源码时代百家号最近更新：简介:源码时代是一家专注IT职业教育的高科技公司作者最新文章相关文章前端（10）
1、先要明确一点，不加word-wrap或word-break的时候，就是浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去：
2、这个长单词还不算变态的，因为至少它没有长到超过包裹它的元素的长度，但是如果超过了的话，就会出现下面的情况，它会溢出它的父容器外，因为这时它是不允许被截断的。
3、这个时候word-wrap就能派上用场了。我们给这段文字加上word-wrap:break-word，为了防止长单词溢出，就在它的内部断句了。这就是 word-wrap:break-word 的功能。
4、long后面不是还有一段空间吗，太浪费了，现在我们来看看使用 word-break:break- 后会怎么样。
word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。而word-break:break-all，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。如果想更节省空间，那就用word-break:break-all就对了！
5、white-space:pre-wrap保留空白符序列，并且正常地进行换行。
6、一般情况下，这三个属性我们是放在一起用的。下面是textarea的编辑状态：
失去焦点之后是非编辑状态，如果去掉
word-break: break-
显示会出现问题：（这算是一个特例吧）
在react里用的时候，数据有时候保存在this.state.value，这时候它会过滤掉里面的换行符\n，导致识别不出来。（之前遇到过一个问题就是数组存在state里面，它会自动过滤掉逗号）
getTextHtml() {
let text = this.props.desc
if(!text||text=='') {
return this.props.placeholder
let result = []
if(text) {
//换行识别
let textArr = text.replace(/\r\n/g,'\r').replace(/\n/g,'\r')
let temp = textArr.split('\r')
temp.map((val, i) =& {
result.push(&span key={i}&{val}&br/&&/span&)
return resultcss - Browser compatible word wrap and whitespace: pre? - Stack Overflow
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
I need text within a div to be preserved and to wrap. So far I am having a tough time coming up with a solution. The best solution I've been able to find doesn't work for all browsers.
The following works in Chrome and IE6+, but in Firefox the text is not wrapping.
white-space:
word-wrap: break-
I've found that for whatever reason the text does not wrap in Firefox with white-space:pre. And -moz-pre-wrap does not work in Firefox 3.5 (why??), only pre-wrap. BUT when I add pre-wrap to the list, IE 6 and 7 don't work. Very frustrating.
.introsub {
width: 550
font-weight:
line-height: 1.5
margin: 0;
padding: 1.5
white-space:
word-wrap: break-
The CSS3 properties don't always work as we would like them to work :).
Still, I don't see a point in mixing white-space:pre and word-wrap:break-word.
The former will not wrap the text unless a &br /& tag is encountered. The second one will do the opposite: break the words whenever it's necessary, even in the middle of a word. They seem to be in conflict, and the most obvious answers to why different browsers react differently to these properties is that
they support either of the two properties
since they are in conflict, the precedence is undefined or different in each browser
(I can't be sure though, I'm not really an expert here).
I suggest you take a closer look at
and then decide on what should be used in your particular case.
You might want to try this (should work in ALL browsers):
white-space: -moz-pre- /* Firefox */
white-space: -pre- /* ancient Opera */
white-space: -o-pre- /* newer Opera */
white-space: pre- /* C W3C standard */
word-wrap: break- /* IE */
I haven't tested this, but I believe it should do the trick for you.
17.5k45496
I know this is a very old issue, but since I have just ran into it I feel the urge to answer.
My solution would be:
Use white-space: pre- as it is nearly the same as white-space:, just adds linebreaks. (reference: )
Then I would specifically target old-ie with either conditional comments (reference: ) or with browser specific css hacks ().
An example for the second method:
.introsub {
width: 550
font-weight:
line-height: 1.5
margin: 0;
padding: 1.5
white-space: pre-
word-wrap: break-
/* IE6 and below */
* html .introsub
{ white-space: pre
*:first-child+html .introsub { white-space: pre
This will be enough to force it to wrap.
4,25643773
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Upcoming Events
ends Mar 27
Stack Overflow works best with JavaScript enabled&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
white-space、word-wrap和word-break的简单整理
摘要：white-space、word-wrap和word-break是决定段落中的文本如何展示的3个css属性,属性说明请点击链接查看参考手册。white-spacewhite-space属性定义了如何处理文本中的空白;具体到细节,主要决定决定了如何处理元素内文本中空白符、换行符、是否允许过长行折行;其中,过长行是指那些单行内容宽度超出了容器宽度的行,以下列代码为例:&!--html--&ABCDEFGHIJKOMN/*css*/p{width:4}内容行ABC
white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性,属性说明请点击链接查看参考手册。
white-space
white-space属性定义了如何处理文本中的空白;具体到细节,主要决定决定了如何处理元素内文本中 空白符 、 换行符 、 是否 允许 过长行 折行;
其中, 过长行 是指那些单行内容宽度超出了容器宽度的行,以下列代码为例:
&!--html--& ABCDEFGHIJKOMN
/*css*/ p{width:4}
内容行 ABCDEFGHIJKOMN 渲染宽度为7em,超过所在容器的指定宽度,那么它属于过长行。
white-space属性各可能值的对比
white-space 默认值为normal ,可选值包括pre、nowrap、pre-wrap、pre-line。
可选值各维度对比
下表对比分析了white-space各值在处理 空白符、换行符、折行与否 时的不同策略。
过长行是否折行
合并连续的空白符、换行符为一个空白符;折行;
连续的多个空白符合并成一个;
换行符被当做空白符处理,一同合并;
折行(说明1)
完全保留代码中格式;不折行;
所有空白符保留;
所有换行符保留;
不折行(说明2)
合并连续的空白符、换行符为一个空白符;不折行;
连续的多个空白符合并成一个;
换行符被当做空白符处理,一同合并;
不折行(说明2)
保留所有空白符、换行符;折行;
所有空白符保留;
所有换行符保留;
折行(说明1)
空白符合并;换行符保留;折行;
连续的多个空白符合并成一个;
所有换行符保留;
折行(说明1)
说明1:折行( CJK遇到容器边界自动换行;非CJK由word-wrap和word-break的值决定。)
说明2:不折行(行内容宽度超出容器宽度时的表现由overflow属性决定;word-wrap和word-break设置为任何值都不影响表现。)
1.如下方代码( 图1 )及相应效果图( 图2 )所示,段落中的换行效果可能来源于两种不同的原因。 一种 是段落中保留的换行符; 另一种 情况是过长行的折行效果。
前者在所属容器宽度改变时,仍然是单独一行;后者在所属容器改变时可能合并到其余行中。
word-wrap和word-break
white-space值为normal、pre-wrap、pre-line时,过长行遇到容器边界时会触发折行现象。white-space决定了过长行是否发生折行,而 word-wrap 和 word-break 用于决定如何进行折行。
理解word-wrap和word-break的区别
从易于区分和理解的角度,我引用了“无双”在 你真的了解word-wrap和word-break的区别吗? 一文中对两个css属性作用的解释:
word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
word-break
word-break 属性用来标明怎么样进行单词内的断句。
关于word-wrap和word-break,我们主要关注word-wrap:break-word和word-break:break-all的区别:
word-wrap先尝试寻找空格、连接符等正常换行点,如果正常换行能满足不超出容器宽度的需求,正常换行;如果正常换行后仍然超出容器宽度,对非CJK长内容进行强制换行。
word-break:break:all直接强制在行末尾换行。
详细论述和验证建议参考张鑫旭大神的 word-break:break-all和word-wrap:break-word的区别 和 无双的 你真的了解word-wrap和word-break的区别吗? ,两篇文章阐述都清晰明了,此处不班门弄斧;引出基本的概念和理解主要为了引出后续的组合引用效果表格。
word-wrap和word-break的组合引用效果
word-wrap默认值normal,可选值break-
word-break默认值normal,可选值为break-all,keep-all。非CJK文本下,keep-all和normal的表现是一致的。
下表列出了word-wrap和word-break的组合使用效果。
word-wrap: word-break:
遵循默认规则折行; 如没有-和空白符,不折行(说明1);
word-wrap: word-break:break-
内容遇到容器末尾强制执行换行;
word-wrap:break- word-break:
优先尝试正常折行; 正常折行后仍然过长的,强制在遇到容器末尾时换行;
word-wrap:break- word-break:break-
内容遇到容器末尾强制执行换行(非末行均占满容器宽度); (不优先尝试-和空白符等折行规则)
说明1:超出容器宽度后的效果优overflow属性决定。
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
white-space、word-wrap和word-break的简单整理相关信息，包括
的信息，所有white-space、word-wrap和word-break的简单整理相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
服务与支持
账号与支持
关注阿里云
International}