一、理论:
1.word-wrap 用来断词而不是断字符
2.word-break:
a.break-all 可以允许非中文断开
b.keep-all 在中文里不允许字断开
2.white-space:
a.nowrap 文本强制不换行
b.pre 显示预定义文本格式
3.浏览器适应:
a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示
b.在firefox下需要采用word-wrap:break-word和overflow:hidden结合
1.word-wrap 用来断词而不是断字符
2.word-break:
a.break-all 可以允许非中文断开
b.keep-all 在中文里不允许字断开
2.white-space:
a.nowrap 文本强制不换行
b.pre 显示预定义文本格式
3.浏览器适应:
a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示
b.在firefox下需要采用word-wrap:break-word和overflow:hidden结合
二、实践:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
pre{
background: #aeaeae;
white-space: pre-wrap;
white-space: pre-line;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap !important;
word-wrap: break-word;
}
table{
background: #829516;
table-layout: fixed;
width:50px;
}
table td{
background: #31b2c6;
overflow: hidden;
word-wrap: break-word;
}
#div1 p{
background: #f5f5f5;
width:50px;
overflow: hidden;
word-wrap: break-word;
}
#div2 p{
background: #f98263;
width:50px;
white-space: nowrap;
word-break: keep-all;
}
</style>
</head>
<body>
<pre>
我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行
</pre>
<table>
<tr>
<td>
下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。
</td>
</tr>
</table>
<div id="div1">
<p>
我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行
</p>
</div>
<div id="div2">
<p>
下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。
</p>
</div>
</body>
</html>