正文
css自动换行样式,Css自动换行
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS样式怎么控制文字强制换行
css文字强制换行的方法，用word-wrap属性
在默认情况下，如果文本的内容超过某个div块的宽度的话，就会发生自动换行，因为div块的white-space属性的默认值是normal。但是也有两种情况：
1、如果div块里是一串的文字内容，那么到了div块的width限制时，会自动换行。
2、如果div块里一串没有空格的字母或者数字的时候是那就不换行了，而是直接溢出div块。这时就要考虑css文字强制换行了。
那CSS样式怎么控制文字的强制换行？
这时候我们需要用到word-wrap属性，还有一个属性word-break也能够解决换行问题，但是它的浏览器兼容性不好，并且还有可能导致其他问题，所以这里不建议使用。
word-wrap的break-word属性值可以导致换行，一般说来如果一个单词比较长的话，行末的空间不足以容纳这个单词就会产生换行，而不是将一个单词截断，word-break的break-all属性值可以截断一个单词
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;
}
相关问答
Q1: 如何使用css让td中的文字自动换行
1、首先打开hbuilder软件，新建一个html文件，里面设置一个3行一列的table表格。
2、然后在style标签中设置table的样式，给table一个宽度和高度，并且把字体调大，设置背景色；再设置td的样式，给它们添加word-wrap和word-break两个属性就可以了，此css属性表示 在长单词或 URL 地址内部进行换行。
3、然后打开浏览器，就可以看到文字已经自动换行了。
Q2: 如何通过css实现自动换行
CSS代码：#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
DIV代码：div ddd1111111111111111111111111111111111/div
效果：文字自动换行。
word-break:break-all;代码起主要作用，如果没有这段代码，超出部分会自动隐藏掉，对用户体验很不好。
