CSS中设置了宽度,但是其中的内容溢出而不换行
当我们为div标签或者p标签等设置了宽度,会出现文本溢出并且不会换行的情况,一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。
原因是由于:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。
解决方法:
方法一:
word-break: break-all;
方法二:
word-break: break-word;
两种方法的区别在于:
方法一:内容到达指定宽度强行断句换行,一个单词显示不开将会截断换行继续展示;
方法二:当前单词在宽度内无法展示,整个单词换行展示;
举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width: 400px;
word-break: break-all;
}
.div2{
width: 400px;
word-break: break-word;
}
</style>
</head>
<body>
<div class="div1">"Time," says the proverb, "is money". This means that every moment well-spent may put some money into our pockets.</div>
<br/>
<div class="div2">"Time," says the proverb, "is money". This means that every moment well-spent may put some money into our pockets.</div>
<br/>
<div class="div1">A1901,B1902,C1903,D1904,E1905,F2001,G2002,H2003,I2004,J2005,K2101,L2102,M2103,N2104,O2105</div>
<br/>
<div class="div2">A1901,B1902,C1903,D1904,E1905,F2001,G2002,H2003,I2004,J2005,K2101,L2102,M2103,N2104,O2105</div>
</body>
</html>
实现效果如下:
显而易见:word-break: break-all
;会将单词截断换行显示;word-break: break-word;
会整个单词换行显示