Web开发过程中文字排版,默认的情况下,行末的长单词会撑开容器。
我们想要的是(像word一样、能够自动换行、既不撑大容器、也不强制拆开行末单词、并且不会隐藏行末单词的多余字母)
①不能撑开容器
②完整的单词不能被强制拆开
③如果行末是长单词的话,整个单词都被换行到下一行
中文排版
标点符号:规定不能至于行首
处理:chrome、IE8、FF浏览器默认标点符号不会置于行首
有些ui会要求 不能至于行尾
技巧:文本内容基本确定的话可以设置letter-spacing的间距来讲行尾的符号调整走
英文排版
关于英文断句
以单词做依据换行: 设置word-wrap:break-word;
总结:
.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;}//*white-space:nowrap;强制不换行,overflow:hidden; text-overflow:ellipsis;超出部分隐藏且以省略号形式出现*/
.p6{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:n ; }//*都起作用,超出 n 行隐藏且以省略号形式出现*/
一般要设置宽度,不然有些没有用。
word-break是:IE5+专有属性
word-break: normal | break-all | keep-all ;
参数
normal : 依照亚洲语言和非亚洲语言的文本规则、允许在字内换行
break-all : 该行为与亚洲语言的normal相同、也允许非亚洲语言文本行的任意字内断开、该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同、对于中文、韩文、日文、不允许字断开、适合包含少量亚洲文本的非亚洲文本
说明
设置或检索对象内文本的字内换行行为、尤其在出现多种语言时、对于中文、应该使用break-all
.p1{ white-space:nowrap; }/* 强制不换行 */
.p2{ word-wrap:break-word;word-break:normal; }/*--自动换行 */
.p3{ word-break:break-all; }/* 强制英文单词断行 */
另外:有归纳的 中文网页重设与排版:typo.css 文案,所以我们可以直接引入来用。以下是原文章截图: