【html】文字排版

【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; }/* 强制英⽂单词断⾏ */
另外：有归纳的⽂案，所以我们可以直接引⼊来⽤。

以下是原⽂章截图：。