深圳web前端开发培训哪里个好

关于HTML中文字换行的一些事-Web前端之家

在HTML中，处理文字换行、强制不换行，不换行多余用省略号的问题，经常会遇到。一般情况下，默认是自动换行的，因此设置好宽度之后，能够较好的实现效果，但是使用ajax加载数据之后，标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，但是并没有发现本质原因，本质在于，获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。

OK，接下来具体分别介绍每一个属性。

强制不换行

我们可以这样来设置：

.box {white-space:nowrap;}white-space

white-space属性

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

white-space: 属性设置如何处理元素内的空白normal: 默认。空白会被浏览器忽略。pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。pre-wrap: 保留空白符序列，但是正常地进行换行。pre-line: 合并空白符序列，但是保留换行符。inherit: 规定应该从父元素继承 white-space 属性的值。

如果强制不换行，有时候会多出的溢出的文字需要被隐藏，并且我们习惯用省略号来处理，如下处理：

.box {text-overflow:ellipsis;overflow:hidden;}

可能有些童鞋对于text-overflow还不是很了解，简单介绍下：

关于text-overflow

text-overflow 属性规定当文本溢出包含元素时发生的事情。

默认值：继承性：版本：JavaScript 语法：

clip

no

CSS3

object.style.textOverflow="ellipsis"

语法： text-overflow: clip|ellipsis|string;

值描述

clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

一起来看个DEMO就很清晰了，如下：

Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家

由于是CSS3属性，所以得牺牲下PC浏览器兼容问题了，大家斟酌使用吧！

自动换行

自动换行一般分为三种：

1、允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句；

2、断句时，不会把长单词挪到下一行，而是直接进行单词内的断句。

3、就是默认的自动换行，不加任何设置。

在这里，我们需要了解2个属性word-wrap和word-break。

word-wrapword-wrap: normal|break-word;

word-wrap: 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。normal: 只在允许的断字点换行(浏览器保持默认处理)break-word: 在长单词或URL地址内部进行换行

word-breakword-break: normal|break-all|keep-all;

word-break 属性用来标明怎么样进行单词内的断句。normal：使用浏览器默认的换行规则。break-all:允许再单词内换行keep-all:只能在半角空格或连字符处换行

还不是很懂？不要紧，我们看个DEMO，就明白了。