【html】文字排版

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 文案，所以我们可以直接引入来用。以下是原文章截图：

【html】文字排版

推荐阅读