一、背景

　　最近项目中有用到在div中显示用户反馈的信息，是指定宽度的div,超出要自动换行，开始写好后感觉应该没什么问题，后来自己随便输入测试数据的时候发现：如果是纯字母或者是纯数字就会出现超出了也不会自动换行的问题，甚是无解，后经过努力，已经完美解决，下面来介绍解决方式。

二、解决方式

　　对于div,p等块级元素：正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。然后对于纯字母和纯数字则不行.如下图：

　　

解决办法是：

　　使用word-wrap:break-word ;或者word-break:break-all;实现强制断行.

添加以后的效果是：

　　

奏是这么任性~

CSS设置超出指定宽度自动换行的更多相关文章

  1. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  2. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. CSS设置表格TD宽度布局

    使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数 ...

  4. css设置超出部分文档隐藏（在table标签中不好使解决方案在下）

    css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...

  5. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  6. CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

    <style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...

  7. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  8. CSS文本超出指定行数省略显示

    单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...

  9. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

随机推荐

  1. Ruby基本语法规则

    1.Ruby常用数据类型 Numbers, Strings, Booleans my_num = 25 my_boollean = true (or false) my_string = " ...

  2. iOS并发编程指南之同步

    1.gcd fmdb使用了gcd,它是通过 建立系列化的G-C-D队列 从多线程同时调用调用方法,GCD也会按它接收的块的顺序来执行. fmdb使用的是dispatch_sync,多线程调用a ser ...

  3. debian8 配置使用 nfs

    操作过的步骤: 1.dpkg-reconfigre rpcbind. 2.在终端上退出要挂载的目录. 错误:mount -t nfs 172.16.0.121:/home/junda /mnt,出现以 ...

  4. HDU 1174 爆头(计算几何)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1174 解题报告:就是用到了三维向量的点积来求点到直线的距离,向量(x1,y1,z1)与(x2,y2,z ...

  5. css弹性布局

    1.弹性布局是什么 在移动端一种方便的布局方式,打破了之前用浮动,定位的布局,更加灵活. 2.弹性布局的格式 包含父元素和子元素,有对应的属性应用在父元素和子元素达到布局的目的 3.父元素的属性 要开 ...

  6. iOS使用webView 加载网页，在模拟器中没有问题，而真机却白屏了。App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist f

    还在info.plist中配置.除了配置允许上网的配置之外,还有另一项.

  7. OpenCV成长之路(9)：特征点检测与图像匹配

    特征点又称兴趣点.关键点,它是在图像中突出且具有代表意义的一些点,通过这些点我们可以用来识别图像.进行图像配准.进行3D重建等.本文主要介绍OpenCV中几种定位与表示关键点的函数. 一.Harris ...

  8. 如何学习caffe

    知乎上的讨论:https://www.zhihu.com/question/27982282 从0开始山寨caffe系列:http://www.cnblogs.com/neopenx/archive/ ...

  9. map的4种遍历方式

            System.out.println("key= "+ key + " and value= " + map.get(key));    }   ...

  10. ssh authentication魔鬼细节--.ssh文件夹权限

    换到7后出现莫名奇妙问题,ssh验证始终不起作用. 服务器 centos7#mkdir ~/.ssh centos7#touch ~/.ssh/authorized_keys centos7#chmo ...