css强制换行和强制不换行

转自：http://chenfengming.cn/front-end/css-qiang-zhi-huan-xing-he-qiang-zhi-bu-huan-xing.html

中文情况下

我们用div，p,ul，li(等块级元素)布局给其设定了特定的width，那么就会自动的换行。

用span，a(等内联元素)设置了display:inline-block,或者display:block;也可以自动换行了。

（div布局）（span布局 display:inline-block;）

含英文不会自动换行，会超出来

（div布局）（span布局display:inline-block;）

强制换行

我们一般控制换行所用到的CSS属性一共三个：word-wrap;word-break;white-space;

word-wrap语法:各浏览器均能识别

网上的结论

word-wrap:normal(默认)|break-word;

参数：

normal：允许内容顶开指定的容器边界。

break-word:内容将在边界内换行，必要时触发word-break（注意请分辨清楚word-break和break-word两个是不同的东西，一个为属性，一个为参数）;

说明：

word-wrap是控制是否”为词断行”的，设置或检索当前行超过指定容器时是否断开转行。中文没有任何问题，语句也没有问题，但是对于长串的英文，就不起作用。

范例：

congratulation这个单词属于长串英文，word-wrap:break-word整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断，这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况，英文单词不被拆开。

结论：

作用范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（如果为td,th加上宽度word-wrap在IE下是能够发挥效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。

自己的结论【IE7,8,9Firfox，谷歌(只测过这几个)】

问题：

含英文会自动换行。（加上word-wrap：break-word;）

(div布局) （span 布局 display：inline-block;）

word-break语法：

参数

word-break:normal(默认)||break-all||keep-all Firefox、Opera不能识别

normal: 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
keep-all: 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。

word-break:break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题（恰恰弥补了上面word-wrap:break-word对于长串文字不起作用的缺陷）。

范例：

继续以上面congratulation这个单词属于长串英文，word-break:break-all它会把单词截断，该行末端就会变成类似conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
word-break:keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

（IE下）（火狐下）

结论：

作用范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（经测试Chrome下word-break:break-all是有效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。Firefox,Opera是无法识别word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

自己的结论：火狐下不兼容这个属性，IE,谷歌浏览器兼容

white-space语法：

white-space: normal(默认) | pre | nowrap

参数：

normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似HTML中的pre标签。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。

说明：

对于pre属性，其实就是HTML中连续的多个空白符会被合并，然后为了不让他合并（最常用的场合就是表示代码文字缩进）让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre标签的原理也是一样的内部默认有了个white-space:pre。
对于nowrap属性，这个是强制不换行核心，一般强制不换行就是利用这个属性。Firefox的div和td中，以及IE的div中，均没有问题。唯一的瑕疵就是在IE的td中会有一个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且文字中无标点、无空格（例如中文长串文字），nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。

结论：

如果在div这类标准块级元素中需要强制换行，最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺点就是会导致如果恰巧该行末端宽为一个长串英文单词，那么该单词会被撕开的尴尬样式(而且FF不识别word-break，反而不会撕开这个单词)。个人认为如果你这个div里面放的类似于URL这个长串地址，那么用此方案是非常不错的选择（注意：由于FF不识别word-break，所以无法保证每行末端会整齐的断开URL单词，但这也是无奈的选择）。如果不是放置URL这类可以断开的长串英文，而是英文句子的话，那么使用word-wrap:break-word;即可。至于网上看到有word-wrap:break-word; overflow:hidden;这么个写法，据说可以兼容IE和FF，但经过亲自测试似乎没有什么特别效果。当然，如果你有更好的方案也可以留言参与讨论，这里也十分欢迎您的意见。

基本上设定完这个属性后基本的换行问题都能够解决而不会出现table中td,th因为里面各个内容的多寡发生抢夺其他td,th宽度的情形发生。这时如果你依旧有强制换行问题，那么在此td中内部加一层div，那么情况就会像上面讨论的方式来解决。

强制不换行的问题到是比较容易分析的，就如上面所讨论的那样使用white-space:nowrap，Firefox的div和td中，以及IE的div中，均没有问题。唯一的瑕疵就是在IE的td中会有一个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且文字中无标点、无空格（例如中文长串文字），nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。综合下来，比较稳妥的方式是在文字与td之间再套一层div，然后使用nowrap，那么就是强制不换行。注意这时候很有可能文字会过多导致溢出容器，所以你还得加一个overflow:hidden，防止溢出容器，这样子就可以兼容各个浏览器了

强制不换行，多余的部分用省略overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

摘自：http://www.hicss.net/solve-change-line-in-css/#comment-798

css强制换行和强制不换行相关推荐

css如何让不自动换行,css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少♦ 嘻嘻...).今天我们来学习一下如何熟练的掌握用css实 ...
html强制不换行标签,css如何设置文字强制不换行？
css可以使用white-space属性设置文字强制不换行,通常我们使用white-space:nowrap强制文本文字内容不换行,在对象内一行显示完所有文字内容. css可以使用white-spac ...
css强制换行、强制不换行，溢出隐藏
css实现强制不换行/自动换行/强制换行在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧.今天我们来学习一下如何 ...
css如何实现自动换行、强制换行、强制不换行？
首先描述问题,今天写一个项目的时候,由于换行了,导致我的卡片都不对齐了代码很简单 <div v-for="item in distributedTestBed" :key= ...
html怎么控制字数换行,css 如何控制span 强制换行
css 如何控制span 强制换行以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! css 如何控制span 强制换行 & ...
html p自动换行超出省略,CSS自动换行、强制不换行、强制断行、超出显示省略号...
CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS样式设置自动换行.强制不换行.强制断行.超出显示省略号 P标签是默认是自动换行的,因此 ...
CSS自动换行、强制不换行、强制断行、超出显示省略号
CSS样式设置自动换行.强制不换行.强制断行.超出显示省略号 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行: 但是最近的 ...
CSS 实现自动换行、强制换行、强制不换行的属性
实现效果 1.自动换行: word-wrap:break-word; word-break:normal; 2.强制换行: word-break:break-all; 按字符截断换行 /* ...
div、p、td 的强制不换行及强制换行
关于强制不换行.强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器.各种标签等情况,以致不兼容,所以我再来说说.由于 div 和 p 在本文的讨论中,效果相同,所以省略 ...

css强制换行和强制不换行

css强制换行和强制不换行相关推荐

最新文章

热门文章