使用一段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只能在半角空格或连字符处换行。
大部分时候文字超出div是文字引起的。例如中英文混在里面。设置正确的word-break或者word-wrap可以解决。看看这篇文章。
参考实际情况看看用那种。
word-break 属性 网页链接
word-wrap 属性 网页链接
应该这样写:容器{overflow-x:autowhite-space:nowrap}
(兼容IE6、IE7、FF)
在这里只用overflow是不够的,因为当文字长度超出容器宽度时浏览器会自己将文字换行,横向的滚动条并不会出现(除非是连接的英文字母并且字母之间没有空格)。在这里必须加上white-space:nowrap(nowrap :强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。)