html自动换行的小问题

原文地址：http://blog.thesharpmind.com/?p=9002

 

对于指定宽度的element如果其中的文本超过了元素宽度，浏览器会做自动换行处理。但是这是有前提的，有的时候如果忽略了一些细节就会造成文本溢出的后果。

我们先来看一个例子，如果我在html代码中写

<p style="width:50px;">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>

在浏览器中查看的结果就是p中的文本ww...w并不会自动换行而是在一行输出了全部文本，溢出了p的范围。这是为什么呢？我们再来看另一个例子

 

<p style="width:50px;">wwww wwww wwww wwww wwww wwww wwww wwww wwww wwww wwww wwww wwww wwww</p>

这次的现实结果是p中的文本自动换行了。对比一下我们就可以发现，浏览器在处理换行的时候是以单词为单位的，也就是说如果一个单词的长度超出了设定的边界，浏览器是不会把这个单词拆成两个单词来实现换行的。（ps:据我所知，出版界所使用的knuth大神写的Tex就有拆分单词换行的功能。)所以我们在用css编辑网页元素大小的时候一定要考虑到宽度下限，不要把宽度舍得太小，否则一旦遇到长单词容易溢出。（中文的优势体现出来了，呵呵，所有的汉字都是一样宽的~）