您现在的位置:首页 >> 前端 >> 内容

《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop

时间:2016/4/25 9:39:30 点击:

  核心提示:通过阅读和学习书籍《CSS3实战》总结 《CSS3实战》/成林著.—北京机械工业出版社2011.5语法:text-overflow:clip | ellipsis | ellipsis-word取值简...

通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.5

语法:

text-overflow:clip | ellipsis | ellipsis-word

取值简单说明:

clip属性值表示不显示标记,而是简单的裁切。

ellipsis属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。

ellipsis-word属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word)。

?实际上,text-shadow属性仅用于决定,当文本溢出时是否显示省略标记,并不具备样式定义的功能。要实现溢出时产生省略号的效果,应该再定义两个样式:强制文本在一行内显示(white-space:nowrap)和溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示为省略号的效果。

实例:设计固定宽度的新闻列表





text-overflow




体育新闻
姚明或将出席球迷签名会 火箭重返故地拉拢球迷10:58
申花恩朗遭足协追加停赛4场01:48
体操世锦赛中国名单公布 陈一冰领军邹凯无缘出征10:52
罗雪娟恋情首度曝光 富二代辞职赴美陪读10:36
广州亚运竞赛全接触 筹备工作正在按部就班进行09:53
曝马拉多纳密会梅西寻支持 拼死重掌阿根廷教鞭10:25
李承鹏:我当足协主席也会贪污 有些脑残不懂09-28 15:17

演示效果:

《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop

语法:

word-wrop:mormal | break-word

取值简单说明:

mormal属性值表示控制连续文本换行。

break-word属性值表示内容将在边界内换行。如果需要,词内换行(word-break)也会发生。

换行技术比较分析:

line-break专门负责控制日文换行,国内使用较少。

word-wrap属性可以控制换行。当属性值取值break-word时,将强制换行,中文和英文文本都没用任何问题。但是对于长串的英文就不起作用,也就是说,word-wrap:break-word是控制是否断刺,而不是断字符。

word-break属性主要针对亚洲语言和非亚洲语言进行控制换行。当属性取值break-all时,可以允许非亚洲语言文本行的任意字内断开;当属性值是break-all时,表示在中,韩,日文是不允许字断开的。

white-space属性具有格式化文本的作用,当属性取值为nowrap时,表示强制在同一行内显示所有文本;当属性值为pre时,表示显示预定义文本格式。

在IE浏览器中,使用word-wrap:break-word;声明可以确保所有文本正常显示。

在Firefox中,中文不会出现任何问题,英文语句也不会出现问题,但是长串英文会出现问题。为了解决长串英文的问题,一般讲word-wrap:break-word;和word-break:break-all;声明结合使用。但是,这种方法会导致普通英文语句中的单词被断开显示(在IE下也是)。

现在的主要问题是长串英文和英文单词会被断开。为了解决这个问题,可使用word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;和word-break:break-all;此外,word-wrap:break-word;overflow:auto;在IE下没有任何问题,但是在Firefox下,长串英文的部分内容就会被遮住。

实例:防止表格标题行换行





word-wrap



避免表格标题行换行显示

/*添加nowrap="noerap"这一属性,确保在不同浏览器中能够更好的换行显示。注意,如果th定义了宽度,该属性将不再起作用*/
排名校名 总得分 人才培养总得分 研究生培养得分 本科生培养得分 科学研究总得分 自然科学研究得分 社会科学研究得分 所属省份 分省排名 学校类型
1 清华大学 296.77 128.92 93.83 35.09 167.85 148.47 19.38 1 理工
2 北京大学 222.02 102.11 66.08 36.03 119.91 86.78 33.13 2 综合
3 浙江大学 205.65 94.67 60.32 34.35 110.97 92.32 18.66 1 综合
4 上海交大 150.98 67.08 47.13 19.95 83.89 77.49 6.41 1 综合
5 南京大学 136.49 62.84 40.21 22.63 73.65 53.87 19.78 1 综合
6 复旦大学 136.36 63.57 40.26 23.31 72.78 51.47 21.31 2 综合
7 华中科大 110.08 54.76 30.26 24.50 55.32 47.45 7.87 1 理工
8 武汉大学 103.82 50.21 29.37 20.84 53.61 36.17 17.44 2 综合
9 吉林大学 96.44 48.61 25.74 22.87 47.83 38.13 9.70 1 综合
10 西安交大 92.82 47.22 24.54 22.68 45.60 35.47 10.13 1 综合

演示效果:

换行显示的表格
《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop

防止表格标题换行
《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop

Tags:《C CS SS S3 
作者:网络 来源:后乐的博客