CSS控制文字的强制换行

CSS控制文字的强制换行:
在默认情况，如果文本的内容超过容器的宽度就会发生自动换行，因为容器的white-space属性的默认值是normal。
代码实例:

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"> 
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></font>
 4 <font size="2"><meta name="author" content="http://www.softwhy.com/" />
 5 <title>蚂蚁部落</title>
 6 <style type="text/css">
 7     div
 8     {
 9         width:200px;
10         height:60px;
11         border:1px solid blue;
12     }
13 </style>
14 <body>
15     <div>建议:尽可能的手写代码，可以有效的提高学习效率和深度。</div>
16 </body> 
17 </html>

在上面的代码中，我们可以看到文字已经自动换行了，但并不说明任何情况下都可以换行。再看下面的实例:

View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></font>
<font size="2"><meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
    div
    {
        width:200px;
        height:60px;
        border:1px solid blue;
    }
</style>
<body>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body> 
</html>

在上面这种情况下，里面的字符串就不会换行而是溢出div边框了。
从上面的情况可以得出，如果文本是一串没有空格的字母或者数字的时候是那就不换行了。
解决方法:
在这里我们需要用到word-wrap属性，还有一个属性word-break也能够解决换行问题，但是它的浏览器兼容性不好，并且还有可能导致其他问题，所以这里不建议使用。
word-wrap的break-word属性值可以导致换行，一般说来如果一个单词比较长的话，行末的空间不足以容纳这个单词就会产生换行，而不是将一个单词截断，word-break的break-all属性值可以截断一个单词。例如:

View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></font>
<font size="2"><meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
    .first
    {
        width:120px;
        height:60px;
        border:1px solid blue;
        word-wrap:break-word
    }
    .second
    {
        width:120px;
        height:60px;
        border:1px solid red;
        word-break:break-all;
    }
</style>
<body>
    <div class="first">I am a good student，and you</div>
    <div class="second">I am a good student，and you</div>
</body> 
</html>

 

posted on 2013-03-13 11:29  太阳出来了  阅读(167)  评论(0)    收藏  举报

导航