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. Android vector标签 PathData 画图超详解

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写.在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下: &l ...

  2. VPS之openVPN的安装配置

    原文地址:http://www.blogjava.net/dongbule/archive/2010/11/01/336714.html 上次写的<VPS的购买和使用>中提到了openVP ...

  3. 编写一个JavaScript函数 parseQueryString,把URL参数解析为一个对象

    var url="http://www.taobao.com/index.php?key0=0&key1=1&key2=2"; function parseQuer ...

  4. 将博CMS安全分析报告-橘皮书

    一.使用IBM的AppScan和Acunetix应用程序漏洞扫描将博CMS5.5,得出一些漏洞.         此番扫描大小共23种类型问题,其中高危漏洞有三个,中危漏洞9个,低级漏洞11个.注意这 ...

  5. 一个获取文件绝对路径的sh

    脚本里有个获取文件绝对路径的需求,linux里有个很方便的realpath命令,但是mac下没有,甚至readlink -f也跟linux下的表现不同,所以……直接用pwd算了 #!/bin/bash ...

  6. influxdb ERR: error parsing query: found -, expected

    ERR: error parsing query: found -, expected 使用时遇到这个问题,执行语句: select * FROM test10-cc-core01 本来以为和sql语 ...

  7. UTF-8 BOM(EF BB BF)

    原标题:link标签和script标签跑到body下面,网页顶部有空白,出现“锘匡豢”乱码,UTF-8 BOM,EF BB BF 来自:http://tunps.com/link-and-script ...

  8. TP复习17

    三大自动,自动创建,自动验证,自动完成

  9. TP复习6

    ## ThinkPHP 3.1.2 查询方式#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.普通查询方式 a.字符串 $arr=$m->wher ...

  10. 好记心不如烂笔头之JQuery学习,第二章

    jQuery获取元素不需要担心元素不存在而报错,但是无论怎样 $("#xxx") 是一定会有返回值的,无论存不存在元素,那么依然是要对元素做判断的,判断的方法常见两种 1.看返回的 ...