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. CS231n官方笔记授权翻译总集篇发布

    CS231n简介 CS231n的全称是CS231n: Convolutional Neural Networks for Visual Recognition,即面向视觉识别的卷积神经网络.该课程是斯 ...

  2. JAVA中ArrayList与LinkedList的区别以及对应List使用foreach与使用下标遍历的效率问题

    近期在做一个对接京东的电商平台,所以对各个地方的效率考虑的比较多,今天深挖了一下ArrayList与LinkedList的区别以及对应List使用foreach与使用下标遍历的效率问题,首先说一下两种 ...

  3. MySQL常用的备份方式与备份工具简介

    一.MySQL备份方式与备份类型 1.备份的必要性 再生产环境中,为了防止硬件故障.软件故障.自然灾害.误操作等各种原因导致的数据库数据丢失后能恢复到事故之前的状态,我们需要对数据库进行备份和恢复操作 ...

  4. loggin(日志模块)

    这是一个提供日志功能的模块,它可以让你更敏捷的为你程序提供日志功能 一.常用日志记录场景及最佳解决方案: 日志记录方式 最佳记录日志方案 普通情况下,在控制台显示输出 print()报告正常程序操作过 ...

  5. MyBatis（国税）

    一.MyBatis概要 1.1.ORM介绍 对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),用于实现面向对象编程语言里不同类型系统 ...

  6. 可能会导致循环或多重级联路径。请指定 ON DELETE NO ACTION 或 ON UPDATE NO ACTION，或修改其他 FOREIGN KEY 约束。

    错误提示:可能会导致循环或多重级联路径.请指定 ON DELETE NO ACTION 或 ON UPDATE NO ACTION,或修改其他 FOREIGN KEY 约束. 原因:自表连接(同一张表 ...

  7. 【ichart】简单的统计图表ichart.js的使用

    1.首先下载,点击下载 2.只需要这一个js,粘贴赋值到自己项目中即可.   3.引入js <script type="text/javascript" src=" ...

  8. (2)Jquery1.8.3快速入门_checkbox全选取消部分选中

    1. jquery示例功能: checkbox多选框 全选 .全不选. 选择部分. 源码 : <!DOCTYPE html> <html> <head> <m ...

  9. Apache:详解QSA,PT,L,E参数的作用

    [QSA] 当被替换的URI包含有query string的时候,apache的默认行为是,丢弃原有的query string 并直接使用新产生的query string,如果加上了[QSA]选项,那 ...

  10. React 入门学习笔记整理（六）—— 组件通信

    1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...