CSS强制中文/整个英文单词自动换行与不换行
2016-01-13 13:10:42  By: qyl

在平时的Web开发过程中、默认的情况下、行末的长单词会撑开容器、不是我们想要的、我们想要的应该是不能撑开容器、而且完整的单词不能被强制拆开、如果行末是长单词的话、整个单词都被换行到下一行、就像word一样、能够自动换行、既不撑大容器、也不强制拆开行末单词、并且不会隐藏行末单词的多余字母、本文将给你条案、先看一下如下CSS代码

.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/     
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/     
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/     
.p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/     
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/


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 是IE5 专有属性


语法

word-break : normal | break-all | keep-all;


参数

normal :  依照亚洲语言和非亚洲语言的文本规则、允许在字内换行

break-all :  该行为与亚洲语言的normal相同、也允许非亚洲语言文本行的任意字内断开、该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同、对于中文、韩文、日文、不允许字断开、适合包含少量亚洲文本的非亚洲文本


说明

设置或检索对象内文本的字内换行行为、尤其在出现多种语言时、对于中文、应该使用break-all


强制不换行

p{
    white-space:nowrap;
}


自动换行

p{
    word-wrap: break-word;
    word-break: normal;
}


强制英文单词断行

p{
    word-break:break-all;
}


以上方法就是对英文或中文在浏览器上面的换行与不换行的处理、希望对大家有用

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+