使用一段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只能在半角空格或连字符处换行。
在固定宽度的条件下,只要加上word-wrap:break-word
word-break:break-all这行
代码,就能起到换行左右。如:
<div style="width:80px height:180px background:#FF0000"><p style="word-wrap:break-word word-break:break-all">afasdfjaklsdfjalkdjfalsdfjalsjdfasdfjalsfj</p></div>
效果