【html】文字排版

时间:2021-02-07 15:55:36

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】文字排版