当前位置:首页 > Css

div中英文无法自动换行的解决方法

happyfhb17年前 (2010-01-22)Css2636
摘要:问题:在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行。但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个英…

问题:

在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行。但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。


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


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


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

扫描二维码推送至手机访问。

版权声明:本文由海海日记-冯海滨博客发布,如需转载请注明出处。

本文链接:http://www.fenghaibin.com/?id=487

“div中英文无法自动换行的解决方法” 的相关文章

css表格边框处理详解

这几天做一个网址导航站的模板,在网上做了一下参考。发现一个表格CSS边框和内边框做的非常好 ,效果如下! table{ background-color:#9C9;} td{ background-color:#CFC;}      &nb…

最简单的tab菜单效果

最简单的tab菜单效果以前自己不会的时候总觉得别人做的tab菜单很高深看不懂里面的代码 可是自己真正去研究的时候发现也就是那么回事。下面把我做的按列拿上来 共大家参考。在配合一些css美化才漂亮,这里只是演示。几乎所有的tab菜单都是基于此原理的。下面是代码。大家可以研究下。 function tr…

升级到IE8 还是坚持IE7?

       IE8用户越来越多,我一直在使用IE7,觉得还不错,因为目前不是很习惯火狐,所以一直用着以IE7为内核的世界之窗浏览器。我到底该不该升级到IE8呢?我一向都是用最新版的软件的,这问题还真的不好决定。  &n…

解决IE浏览器不支持min-height 的问题

根据海滨的实践.min-height样式IE是不支持的 唯有FF支持. 但是可以用下面的办法搞定最小高度问题.height:auto!important; height:400px; /*假定最低高度是400px*/ min-height:400px;…

您需要了解的DIVCSS网页布局的8条面试题目

CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天52CSS.com收集了常见的8条面试题目,希望对您有所帮助。一、超链接点击过后hover样式就不出现的问题?被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺…

CSS/DIV网页设计视频教程

 CSS基础知识与核心概念CSS初探 - CSS基本知识 - 第1课CSS基本语法与核心概念 - CSS基本知识 - 第2课设置丰富的文字效果 - CSS基本知识 - 第…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。