• 首页
  • css3
  • 整理一些css 中关于 中文 英文 折行 省略 不折单词 等问题

整理一些css 中关于 中文 英文 折行 省略 不折单词 等问题

css3.jpeg

记录规整一些 关于CSS 处理中文 /英文 折行/不折行 省略 等问题. 这些问题涉及到了几个css 属性,简单记录一下,以备以后碰到


涉及到控制上面提到的问题,必须注意一点,你的容器设定了固定的宽度


英文字母换行,只对英文字母起作用,如果是单词,可能一个单词被拦腰折断

word-break:break-all;

word-break语法:

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


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


比如:

<div style="width:300px;word-break:break-all;" >
fasdfafdfdsfasdfasdfadsfafafadfadfdfadfa
</div>

英文单词换行,不折断 英文单词,保证单词的完整性,比较人性化 ,结合 word-break 使用

word-wrap:break-word;word-break:normal

word-wrap语法:

word-wrap: normal(默认) | break-word 各个浏览器均能识别


normal: 允许内容顶开指定的容器边界。 break-word: 内容将在边界内换行。必要时会触发word-break(注意:请分辨清楚word-break和break-word这俩个是不同的东西,一为属性另为参数)


比如:

<div style="width:300px;word-wrap:break-word;word-break:keep-all;">
Hello World! Hello World!  Hello World! Hello World!  Hello World! Hello World!  Hello World! Hello World! 
</div>

中文汉字换行,达到长度强制换行

white-space:pre-wrap;

比如:

<div style="width:300px;white-space:pre-wrap;">
一介布衣 一介布衣 一介布衣博客 一介布衣 一介布衣博客  一介布衣 一介布衣博客(我这样会不会被打~~~~)
</div>

强制不换行

white-space:nowrap;

white-space语法:

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


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


比如:

<div style="width:300px;white-space:nowrap;">
Hello World , 中英文都起作用, Hello World! 站在世界中心呼唤爱! Hello World!
</div>

强制不换行,超出容器宽度的以省略号结束

white-space:nowrap;overflow:hidden;text-overflow:elipsis;

比如:

<div style="wdith:300px;white-space:nowrap;overflow:hidden;text-overflow:elipsis;">
Hello world! 这里会出现一个省略号, Hello world ,这里要出现一个省略号,我都快发神经了
</div>

出自:整理一些css 中关于 中文 英文 折行 省略 不折单词 等问题



回到顶部