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

在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行。

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

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

解决办法:在div的style中设定word-break:break-all;即可实现自动换行。

时间: 2024-08-28 16:12:50

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

响应式框架中,table表头自动换行的解决办法

最近在用bootstrap开发网站,在处理一张table的时候发现,通过PC端查看样式正常,在手机上查看时,因为屏幕小,表格被压缩的厉害,表头和数据变形如下图 后来网上找了一下,发现一个好用的CSS属性,加上就可以解决该问题   style="word-break: keep-all" 在此记录一下.

div无法触发blur事件解决办法

默认情况下div无法获取焦点,无法触发focus与blur事件,猜测span,a等标签也无法触发焦点事件(input:button,及button标签可以触发) 如何使div触发blur事件:可以给div加上tabindex属性 在线演示:http://sandbox.runjs.cn/show/e0bvfcag 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示: 后来查资料,发现这个标签的文字是可以自定义的,定义方式如下: 1 formatter: function(text){ 2 var strlength = text.length; 3 if(strlength % 2 == 1){ 4 text = text.replace(/\S

嵌套div中margin-top转移问题的解决办法

在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&q

div里包含img底部多出3px的解决办法

如果将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来.padding.margin.border都设为0,无效!那么怎么解决这个问题呢? 问题图: 解决后的效果: 这个Bug真是十分有意思,不过有N多种解决办法! 1.设置div{ font-size: 0} 2.设置img{ display: block} 3.设置img{ vertical-align:top;} 当然推荐第二种方法,让img对象成为块级元素.

div背景图片或颜色不显示的解决办法

背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)DIV高度为自动,背景颜色无法显示,在代码中将原代码height:auto; 改为height:100%; overflow:hidden;!important:同时还可以兼容 IE6.7.8和谷歌火狐. (2)假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属

ie6下div高度不能为0的解决办法

需要实现一个效果:点击关闭按钮时,div动态隐藏. jquery源码: 这个方法在谷歌 火狐及ie7以上都可以实现效果,但ie6下始终保持一个高度. 原因:ie始终默认div的最小高度为12px,即使你设置为0,但它依然默认一个字体的高度12px 解决办法:给当前需设置高度低于12px的div增加一个overflow:hidden属性.

div+css中边框不听话的解决办法

在学习div+css布局过程中,碰到边框不听话的问题.就是我的样式表里是没有指定margin,boder等属性,预期效果应该是 左列,中列,右列三个div紧密结合,占据一整行.预期结果如下 然而实际效果如下 如图所示,在"中列"的四周出现了一下白边.代码如下 <style type="text/css">#left4{ width:200px; height:200px; background-color:#09F; border:2px solid #

子div块中设置margin-top时影响父div块位置的解决办法

在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办法1: 若子div块中使用margin-top,则在父div块中添加:overflow:hidden; 解决办法2: 若由于特殊情况不能在父div块中添加:overflow:hidden,那么在子div块中用padding-top代替margin-top;