text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。

语法:

但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:

text-overflow:ellipsis; //显示省略标记
overflow:hidden; //溢出内容为隐藏
white-space:nowrap; //强制文本再一行内显示

同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。

语法:

normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。

》》》》》》》》》》》》》》多行文本显示省略号《《《《《《《《《《《《《《《《《

【CSS3】---text-overflow 与 word-wrap的更多相关文章

  1. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  2. 在项目中利用TX Text Control进行WORD文档的编辑显示处理

    在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示.编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Offi ...

  3. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  4. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  5. Sublime Text 2 自动开启换行 Word Wrap

    首先当然要夸一下神器 Sublime Text 2,自从第一次用我就彻底把神马 Notepad++ 和 TextMate 打入冷宫,用来开发 WEB 项目从此 IDE 都不需要了! 下面讲讲如何自动开 ...

  6. [CSS3] Text ellipsis

    Link: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow div{ white-space: now ...

  7. CSS3:overflow属性详解

    1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...

  8. css3

    CSS3的换行 如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-wo ...

  9. CSS3 教程

    CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3!  更多:http://www.runoob.com ...

  10. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

随机推荐

  1. xampp 修改mysql 密码

    编辑 lampp/etc/extral/httpd-xampp.conf 文件注释掉 连上mysql,修改mysql下root 用户的登入密码为123456,执行 UPDATE user SET pa ...

  2. Android - Facebook KeyHash 設定

    转自:http://www.dotblogs.com.tw/newmonkey48/archive/2014/04/17/144779.aspx App要使用Facebook 分享時,設要在Faceb ...

  3. Cocos2d-x利用CCHttpRequest获取网络图片并显示

    利用CCHttpRequest获取网上http地址的图片并缓存到本地生成CCSprite用于显示 //图片结构class imgstruct : public CCObject { public: i ...

  4. C++ Bit Fields

    http://msdn.microsoft.com/en-us/library/ewwyfdbe%28v=vs.71%29.aspx Note An unnamed bit field of widt ...

  5. Java常见排序算法之堆排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  6. java android ExecutorService 线程池解析

    ExecutorService: 它也是一个接口,它扩展自Executor接口,Executor接口更像一个抽象的命令模式,仅有一个方法:execute(runnable);Executor接口简单, ...

  7. UE 的使用

    1.查找,只匹配整个词语:匹配词语Andy,而不匹配包含Andy的词语,Andy前后有特殊字符才能匹配成功,前后的特殊字符表明Andy是一个词语. 2.正则表达式匹配,如下: 符号 功能 % 匹配行首 ...

  8. DLX舞蹈链 hdu5046

    题意: 在N个城市选出K个城市,建飞机场(1 ≤ N ≤ 60,1 ≤ K ≤ N),N个城市给出坐标,选择这K个机场,使得从城市到距离自己最近的机场的 最大的距离 最小. 输出这个最小值. 思路: ...

  9. MS WORD 表格自己主动调整列宽,自己主动变美丽,依据内容自己主动调整

    在MS WORD中,当有大量的表格出现时,调整每一个表格的的高和宽和大小将是一件很累的事情,拖来拖去,很耗时间,并且当WORD文档达到300页以上时,调整反应很的慢,每次拖拉线后,须要等待一段时间其才 ...

  10. Android 多级树形菜单

    在Android里要实现树形菜单,都是用ExpandableList(也有高手自己继承ListView或者LinearLayout来做),但是ExpandableList一般只能实现2级树形菜单... ...