一、背景

　　最近项目中有用到在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. 动态调用web服务

    通常我们在程序中需要调用WebService时,都是通过“添加Web引用”,让VS.NET环境来为我们生成服务代理,然后调用对应的Web服务.这样是使工作简单了,但是却和提供Web服务的URL.方法名 ...

  2. bootstrap-tab

    功能:点击时切换相应的内容或图片 插件:tab.js 要点:tab标签用在导航条上,以data-toggle作被点击者, 以tab-content作内容显示 <!DOCTYPE html> ...

  3. httpd服务访问控制

    客户机地址限制 通过配置Order.Deny from.Allow from 来限制客户机 allow.deny :先"允许"后"拒绝" ,默认拒绝所有为明确的 ...

  4. MAC地址，使用java获取IP地址和MAC地址。

    MAC地址,通常在http连接的项目中,来区分唯一客户端. MAC:六组十六进制字符组成. 如:E0-3F-49-AB-DB-EB IP:四组八位的二进制字符组成. 如:10.6.62.244 /** ...

  5. .net生成二维码

    下好QRCode.dll引用到项目中 using System; using System.Collections.Generic; using System.Linq; using System.W ...

  6. html5的触摸事件

    1.触摸事件有哪些 touchstart,touchmove,touchend 2.分别什么时候触发 touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touc ...

  7. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  8. dp重拾-完全背包--HDU 4508

    减肥记 湫湫给了你每日食物清单,上面描述了当天她想吃的每种食物能带给她的幸福程度,以及会增加的卡路里量. Input 输入包含多组测试用例. 每组数据以一个整数n开始,表示每天的食物清单有n种食物. ...

  9. exit（）和_exit()

    进程就好比人一样有其生命,我们通过fork()函数来创建一个进程,那么我们又是如何来中止进程呢. 进程退出 1.在Linux中任何让一个进程退出 进程退出表示进程即将结束.在Linux中进程退出分为了 ...

  10. 网页嵌入swf代码

    <object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://dow ...