内容超出div宽度后自动换行的css代码

使用一段css代码：”word-wrap: break-word;word-break: break-all;overflow: hidden;“。

实例演示如下：

1、设计两个容器，放入一些文字，代码如下：

此时的页面展示如下：（均为换行）

2、修改两个容器的样式，给第一个容器加上了关键代码如下：

此时的页面展示（第一个已经换行）：

扩展资料：

css详解：

一、word-wrap: normal|break-word（word-wrap 属性允许长单词或 URL 地址换行到下一行）。

1、normal ，只在允许的断字点换行（浏览器保持默认处理，默认值）。

2、break-word， 在长单词或 URL 地址内部进行换行。

二、word-break: normal|break-all|keep-all（通过使用 word-break 属性，可以让浏览器实现在任意位置的换行）。

1、normal 使用浏览器默认的换行规则。（默认值）

2、break-all 允许在单词内换行。

3、keep-all 只能在半角空格或连字符处换行。

默认情况下，当内容文本超出div宽度之后，就会自动换行，除非你使用的是一些“aaaaaaaaaaaaaaaaaaaaaaa”之类的无间断的英文（测试用数据），这时候你可以使用 word-break属性进行处理，设置word-break: break-all;即可

html中超出盒子宽度会自动换行的，不用设置，如果你连续的英文之间没用空格，那么它会以为是一个单词，就不会换行，这个时候加上word-break: break-all; word-wrap:break-word;
就可以了。

只要你div宽度设定好了中文会自动换行的不需要加CSS它自己也会换行。如果是一个长的字符串英文你加什么都没有用。

这段代码才对！

• white-space:pre-wrap;

• white-space:-moz-pre-wrap;

• white-space:-pre-wrap;

• white-space:-o-pre-wrap;

• word-wrap:break-word;