即text-overflow:ellipsis,需要配合white-space:nowrap使用。

运行代码:

[提示:你可先修改部分代码,再按运行]

在进行DivCSS布局时,需要对文本进行控制,今天系统的向大家介绍一下。CSS中控制换行的四种属性。
  一、white-space
  可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。
  语法:
  white-space : normal | pre | nowrap
  取值:
  normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
  pre: 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
  nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
  说明:
  设置或检索对象内空格字符的处理方式。
  空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体 来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
  此属性作用于块对象。
  相关样式:
  text-overflow
  将它与white-space结合使用就不用再写程序来判断字符串长度了,点此查看示例。
  语法:
  text-overflow : clip | ellipsis
  取值:
  clip:默认值。不显示省略标记(…),而是简单的裁切
  ellipsis:当对象内文本溢出时显示省略标记(…)
  说明:
  设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。
  这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
  要强制溢出发生并且应用 ellipsis 值,作者必须设置对象的 white-space 属性值为 nowrap 。
  假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。
  为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。
  通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。
  此属性为在DHTML中制作省略标记提供了高效的方法。
  二、word-break
  最常用的控制换行属性,常与下面的word-wrap结合使用。
  语法:
  word-break : normal | break-all | keep-all    取值:
  normal: 默认值。允许在词间换行
  break-all:该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
  keep-all:与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
  说明:
  设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
  对于中文,应该使用 break-all 。
  三、word-wrap
  如果你设计的网页不是自适应宽度的话,需要将它设置为break-word,否则可能出现版快错开的情况。
  语法:
  word-wrap : normal | break-word
  取值:
  normal:默认值。允许内容顶开指定的容器边界
  break-word:内容将在边界内换行。如果需要,词内换行( word-break )也将发生
  说明:
  设置或检索当当前行超过指定容器的边界时是否断开转行。
  此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
  四、overflow,overflow-x,overflow-y
  这个不是严格意思上的控制换行样式,但在某些时候将它设置为hidden可以补充word-wrap的不足,比方你想在限制宽度里仅显示一行文字,而这行文 字的长度却超过这个宽度,结合white-space+text-overflow可以达到更好的效果。
  语法:
  overflow : visible | auto | hidden | scroll
  取值:
  visible: 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
  auto:在必需时对象内容才会被裁切或显示滚动条
  hidden:不显示超过对象尺寸的内容
  scroll:总是显示滚动条
  说明:
  检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
  所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。
  对于 table 来说,假如 table-layout 属性设置为 fixed ,则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ,那么超出 td 尺寸的内容将被剪切。如果设为 visible ,将导致额外的文本溢出到右边或左边(视 direction 属性设置而定)的单元格。
  自IE5开始,此属性在MAC平台上可用。
  自IE6开始,当你使用 !DOCTYPE 声明指定了 standards-compliant 模式,此属性可以应用于 html 对象。

转载于:https://www.cnblogs.com/sallon/p/3229487.html

文字超长自动省略,以...代替,CSS实现相关推荐

  1. 文字超长自动加省略号的css写法

    2019独角兽企业重金招聘Python工程师标准>>> 网上找到大部分说的是加上: overflow: hidden; text-overflow: ellipsis; width: ...

  2. html中文字怎么自动排版,了解HTML CSS格式化排版 文字排版

    java调用url接口 很多简单的接口就是直接一个URl的形式, 怎么调用? HttpClient httpclient=null; PostMethod post=null; try{ httpcl ...

  3. li 字多出了省略号_文字溢出自动显示省略号css方法 -

    文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...

  4. 文字超过省略_纯CSS实现“文本溢出截断省略”的几种方法

    在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节.看上去 "稀松平常" ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基 ...

  5. li 字多出了省略号_文字溢出自动显示省略号css方法

    这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...

  6. css文字超长显示...

    overflow: hidden; // 文字超长隐藏text-overflow:ellipsis; // 显示...white-space: nowrap; // 单行显示

  7. jQuery实现 div里面的文字如何自动缩小,避免文字溢出

    今天用 jQuery实现 div里面的文字如何自动缩小,避免文字溢出的一个例子 代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  8. html把切片变成div,关联网页自动切片生成Div+Css软件

    DivCssData(关联网页自动切片生成Div+Css软件数据库版)是一款只需要导入效果图,拉框线就可以生成标准的兼容性的DIV+CSS,同时集成图片切换.图片滚动.滑动门TAB效果.视频代码.表单 ...

  9. Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办?...

    问题1:Word中摘要和正文同时分栏后,正文跑到下一页,怎么办?或Word分栏后第一页明明有空位后面的文字却自动跳到第二页了,怎么办? 答:在word2010中,菜单栏中最左侧选"文件&qu ...

最新文章

  1. C/C++指向指针的指针
  2. Java的知识点5——扩展赋值运算符、 关系运算符、 逻辑运算符、字符串连接符、 条件运算符
  3. Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
  4. 关于jedis2.4以上版本的连接池配置,及工具类
  5. 中国胎儿(分娩和分娩)和新生儿护理设备行业市场供需与战略研究报告
  6. WF本质论第一章的代码
  7. Voxengo Peakbuster for mac(音频谐波增强插件)
  8. 51单片机多种方式点亮LED
  9. 八爪鱼数据采集器的使用
  10. 核磁共振波谱仪基础知识及常见问题
  11. leetcode675. Cut Off Trees for Golf Event(Hard)
  12. 基于HTML、CSS、JavaScript、jQuery的app小项目--简易备忘录
  13. 硬盘的Smart信息说明
  14. 深入理解矩阵的特征值和特征向量
  15. 内存动态分配和垃圾收集技术所围成的“高墙
  16. lua运行外部程序_在C语言程序中嵌入Lua脚本
  17. 基于Redis的Set实现共同好友微关系
  18. 甲骨文助ISV 通过SOA与Oracle软件集成
  19. 计算机交互式登录进程初始化失败,提示交互式登录进程初始化失败怎么办?
  20. 大学生就业问题的统计研究

热门文章

  1. 算法——计数排序与快速排序
  2. 【Nginx】如何建立新连接
  3. 父窗口与子窗口的数据传递问题
  4. 常用的js验证数字,电话号码,传真,邮箱,手机号码,邮编,日期
  5. ls命令显示结果图解
  6. 3w最简单led灯电路图_led灯驱动电源电路图大全(六款模拟电路设计原理图详解)...
  7. java 二分查找_计算机入门必备算法——二分查找法
  8. c# 调用restful json_微服务调用为啥用RPC框架,http不更简单吗?
  9. 怎么向tab control中加其它控件(如文本框等)
  10. Linux下的shell编程入门