使用一段css代码：”word-wrap:break-wordword-break:break-alloverflow: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只能在半角空格或连字符处换行。
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
}
