1. span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;}

white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 
取值: normal | pre | nowrap | pre-wrap | pre-line | inherit 
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) 
pre: 保持HTML源代码的空格与换行,等同与pre标签 
nowrap: 强制文本在一行,除非遇到br换行标签 
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 
inherit: 继承 
初始值: normal 
继承性: 是 
适用于: 所有元素 
white:白色.space:间隔,距离

 

span 文本内容超过宽度自动换行的更多相关文章

  1. [TimLinux] JavaScript table的td内容超过宽度缩为三个点

    1. 思路 CSS控制td内容自动缩为三个点 JS控制鼠标悬浮显示td全部内容 2. 实现 HTML代码: <!DOCTYPE html> <html> <head> ...

  2. css 内容超出宽度自动换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!

  3. CSS实现内容超过长度后以省略号显示

    样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: ...

  4. css为超过一定宽度的文本内容自动加上省略号

    当在html中某个地方添加文本内容的时候如果内容过长我们会希望他超过一定宽度之后,其余的可以被截断,后面补充为省略号: 实现方式: 1.设置css样式为文本不换行: 2.位包裹文本的标签指定宽度: 3 ...

  5. Easyui datagrid 设置内容超过单元格宽度时自动换行显示

    datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...

  6. div中的内容超过容器宽度的问题

    问题描述: <div class="category">    <div class="column-a">排名</div> ...

  7. input文本框自适应文本内容宽度

    input文本框自适应文本内容宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. div 加滚动条 超过div宽度 自动换行 div居中

    一.div 中加滚动条 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽 ...

  9. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

随机推荐

  1. 用pip安装python库下载timeout的解决办法

    我们直接用命令:pip install 库名,因网络太慢,导致下载超时~~~ 针对在安装Python库出现的超时问题---总结了如下两种解决方案: 其一:pip --default-timeout=1 ...

  2. RPA流程自动化-Blueprism认证考试介绍

    RPA流程自动化-Blueprism认证考试介绍 接触RPA有一段时间了,几种RPA相关工具也都试用过,BluePrism是RPA工具的一种,今天跟大家分享考Blueprism的一些经验. RPA(R ...

  3. asp.net mvc之ActionResult

    Web服务器接收到一个客户端请求以后,会对请求予以相应,而这个响应是通过Response来控制的, 但是在asp.net mvc 里,这部分的工作是由ActionResult来完成的, ActionR ...

  4. MySQL学习（四） SQL连接查询

    更多情况下,我们查询的数据来源于多张表,所有有必要了解一下MySQL中的连接查询. SQL中将连接查询分成四类:交叉连接,内连接,外连接和自然连接. 数据准备 student表 -- -------- ...

  5. Java基础——Oracle（二）

    一.Oracle 中的几个服务 1.OracleDBConsoleorcl 进程:nmesrvc.exe oem控制台服务进程,dba用.Oracle Enterprise Manager(Oracl ...

  6. Excel与minitab的不同

    minitab是专业数据分析软件,可以直接通过导入数据源出结果,出图表, EXCEL的长处就是单元格可编辑,可视化强,也能做较多的分析,导入一些加载宏后功能更强大,但就分析能力而言,还 是比minit ...

  7. cache 访问频率的思考

    互联网的项目用户基数很大,有时候瞬间并发量非常大,这个时候对于数据访问来说是个灾难.为了应对这种场景,一般都会大量采用web服务器集群,缓存集群.采用集群后基本上就能解决大量并发的数据访问.当然这个时 ...

  8. IntelliJ IDEA汉化步骤以及乱码解决

    1.首先下载intellij idea 2017 汉化补丁 附上资源 链接: https://pan.baidu.com/s/1cHC76m 密码: q23m 2.解压该款汉化补丁到本地(我的资源不需 ...

  9. js实现的玫瑰花

    <html> <head> <meta charset="utf-8"> <title>开心快乐每一天</title> ...

  10. cf1130E. Wrong Answer(构造)

    题意 题目链接 Sol 对构造一无所知... 题解的方法比较神仙,,设第一个位置为\(-1\),\(S = \sum_{i=1}^n a_i\) 那么我们要让\(N * S - (N - 1) * ( ...