使得文本换行有很多方式,
1.< br/>标签元素,能够强制使得所在位置文本换行
2.< p>元素,< div>设定宽度,都可以对文本内容实现自适应换行
3.对于长单词或者链接,默认不会断开换行,方式2就不能够在其这些文本内部进行换行了,这时就需要word-wrap : break-word ;或者word-break:break-all;实现强制断行。
两种方法的区别说明:
1,word-break:break-all 例如div宽400px,它的内容就会到400px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。还有就是如果单词太长的话也会进行分割。
我遇到一个情况,就是我设置了:
word-break:break-all 或者word-wrap:break-word都无效,字符串不会自动换行。
经过查证,发现原因会有两个:
1、word-wrap对行内元素是没有效果的
2、一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),可能是元素中设置的white-space是norwrap导致,无法换行。所以需要
white-space:normal;
word-break:break-all;
这样问题就解决了。
white-space对程序中的空白进行处理,默认是normal (浏览器会对空白进行忽略)
3、对table 的td 标签下的元素设置word-wrap:word-break是没有效果的
white-space
我们都知道如果在html中输入多个空白符,默认会被当成一个空白符处理,实际上就是white-space这个属性控制的:
1.normal:合并空白符和换行符;
2.nowrap:合并空白符,但不许换行;
3.pre:不合并空白符,并且只在有换行符的地方换行;
4.pre-wrap:不合并空白符,允许换行符换行和文本自动换行;
word-spacing
功能:主要控制单个词与单个词之间的距离
word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格,则该属性无效。
word-spacing 属性增加或减少单词间的空白(即字间隔)。
该属性定义元素中字之间插入多少空白符。针对这个属性,“字” 定义为由空白符包围的一个字符串。如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。
<p style="word-spacing:10px;"> this is a test</p>
//显示: this is a test*/
<p style="word-spacing:10px;">这 是 一 个 测 试 </p>
//显示: 这 是 一 个 测 试
letter-spacing
lletter-spacing 属性增加或减少字符间的空白(字符间距)。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。
<p style="letter-spacing:10px;"> thisisatest </p>
//显示: t h i s a t e s t
<p style="letter-spacing:10px;"> 这是一个测试</p>
//显示:这 是 一 个 测 试
letter-spacing,word-spacing的区别
word-spacing 属性增加或减少单词间的空白(即字间隔)。
letter-spacing 属性增加或减少字符间的空白(字符间距)。
word-spacing意思是设置单词间的间距,如何区别是不是为一个单词呢,这里我们可以看出 用空格隔开的为一个单词,所以在执行word-spacing:10px;执行的前后可以发现,执行后空格变得更大了!!