一、背景

　　最近项目中有用到在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. HDOJ 4336 Card Collector

    容斥原理+状压 Card Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  2. An error I have completed recently

    在上学期开发javaweb的项目中,遇见一个字符串池的问题. 大致如下: 在上传一篇文章的时候,通过字符串的截取获取该篇文章的后缀名,如doc.pdf.txt....然后规定只能上传pdf和doc格式 ...

  3. MVC中下拉列表绑定方法

    方法一: 前端 @Html.DropDownListFor(a=>a.acate,ViewBag.CateList as IEnumerable<SelectListItem>) 后 ...

  4. js 模块化编程

    Javascript模块化编程(一):模块的写法   作者: 阮一峰 日期: 2012年10月26日 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞 ...

  5. php字符串格式化函数addslashes()

    1.这个函数的使用和php.ini中的magic_quotes_gpc的配置有关,默认情况下,这个配置为on.并且,这个配置处于一个较高级别,脚本中不能修改.所以,检测这个配置情况就很重要. 2.在脚 ...

  6. wp手机 htc x310e

    入手htc x310e 手机不错,用着流畅 不习惯,已升到wp7.8,系统限制还是有些需要的功能没有,比如说短信拦截什么的 我需要的常用软件少 转手了 1 注销windows live? 设置--应用 ...

  7. AChartEngine 安卓折线图 柱形图等利器

    http://www.eoeandroid.com/thread-548233-1-6.html 最近公司项目中要用到折线图,状态类型的图标要用到折线图,柱形图等,并且能够动态显示,在网上找了许多de ...

  8. polymorphic-associations 多态关联实例 ruby on rails

    这次做新项目的时候,把图片都放在了一个表里,其他表中不再存图片信息,通过多态关联建立表之间的关系. (1)新建picture表, component表不需要处理 class CreatePicture ...

  9. WEB前端知识在乱花渐欲迷人眼的当下，如何分清主次和学习优先级呢？

    从正美的吐槽开始,我回了下,说对盲目跟风的大众失去信心了.然后一些同学说我固步自封,另一些同学估计想说倚老卖老啥的.我想说清楚一点,我从 未停止过学习,只是对知识的重要程度和精力分配有自己的观点.具体 ...

  10. hiho #1326 : 有序01字符串

    #1326 : 有序01字符串 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 对于一个01字符串,你每次可以将一个0修改成1,或者将一个1修改成0.那么,你最少需要修改 ...