当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > div中英文无法自动换行的解决办法

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 div中英文无法自动换行的解决办法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 113 ::
收藏到网摘: n/a

但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。

原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个英文单词,所以单词就一次输出不换行。那么,难道我们得在每个字母中间加入一个空格来解决这个问题么?其实不用的,可以通过CSS实现。

解决办法:在div的style中设定word-break:break-all;即可实现自动换行。添加后的div代码大致如下

div中英文自动换行

复制代码
代码如下:

<div style="word-break:break-all;width:20px“ >现在这里的英文达到20px长度就会自动换到下一行了</div>

"