CSS的Word

2021-01-20 09:02 jianzhan
在div中,文字合理布局常常出現,换行错乱的状况。

难题主要表现:
1.假如是全英文本符串,正中间不包括任何标记(包含空格),不全自动换行.
2.中英文混写,则在英文本符串的刚开始处换行(英文长度>div长度),末尾处不换行。
3.英文全部单词换行。这些,将会也有1些难题,这里只列出了普遍的几个;

详细介绍上面几个css特性作用的简易用法;

word-wrap:normal | break-word; (內容换行)
normal:默认设置的特性值.(容许內容顶开特定的器皿界限).
break-word:內容将在界限内换行(不断开英文单词换行,断开英文单词下面的特性才具有这个作用。)

word-break:normal | break-all | keep-all (词内换行)
normal:假如是汉语则到界限处的中国汉字换行,假如是英文全部词换行,留意:假如出現某个英文本符串长度超出界限,则后边的一部分将撑开边框,假如边框为固定不动特性,则后边一部分将没法显示信息.
break-all : 强行换行,将断开英文单词
keep-all : 不容许字断掉。假如是汉语将把前后左右标点标记内的1个中国汉字短语全部换行,英文单词也全部换行,留意:假如出現某个英文.标识符串长度超出界限,则后边的一部分将撑开边框,假如边框为固定不动特性,则后边一部分将没法显示信息.

text-overflow:clip | ellipsis (文字外溢)
clip :  无法显示省略标识(...),而是简易的裁剪
ellipsis :  当目标内文字外溢时(超出width一部分)显示信息省略标识(...)

white-space: normal | pre | nowrap (內容不换行)
normal 默认设置。空白会被访问器忽视。
pre 空白会被访问器保存。其个人行为方法相近 HTML 中的 <pre> 标识。
nowrap 文字不容易换行,文字会在在同1行上再次,直至遇到 <br> 标识为止。
(层中放1个报表,假如层的float:none 则报表和层间会有时间隙,这类难题的处理方法是在层的style里边再加white-space: nowrap)

应用方法: word-break:break-all;

1般状况下:

拷贝编码
编码以下:

.body{
word-wrap:break-word;
word-break:keep-all;
overflow:hidden;
}
.css{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}

IE与Firefox将它当做是1个长单词了,因而不容易全自动换行。
针对IE,能够根据IE特有的CSS特性word-wrap便可完成全自动换行:word-wrap:break-word;

针对Firefox,CSS2规范并沒有界定相近word-wrap的特性,能够根据overflow特性将撑出的一部分掩藏:overflow:hidden