《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含8128字,纯文字阅读大概需要12分钟。
内容图文
通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.5
语法:
text-overflow:clip | ellipsis | ellipsis-word
取值简单说明:
-
clip
属性值表示不显示标记,而是简单的裁切。 -
ellipsis
属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。 -
ellipsis-word
属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word)。?实际上,text-shadow属性仅用于决定,当文本溢出时是否显示省略标记,并不具备样式定义的功能。要实现溢出时产生省略号的效果,应该再定义两个样式:强制文本在一行内显示(
white-space:nowrap
)和溢出内容为隐藏(overflow:hidden
),只有这样才能实现溢出文本显示为省略号的效果。
实例:设计固定宽度的新闻列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>text-overflow</title><styletype="text/css">dl{/*固定新闻栏目外框*/width:240px;
border:solid 1px #ccc;
}dt{/*设计新闻栏目标题行*/padding:8px 8px;
background:#7FECADurl(images/green.gif) repeat-x;
font-size:13px;
text-align:left;
font-weight:bold;
color:#71790C;
margin-bottom:12px;
border-bottom:solid 1px #efefef;
}dd{/*设置新闻列表项样式*/font-size:0.78em;
height:1.5em;
width:220px;
padding:2px 2px 2px 18px;/*为添加新闻项目符号腾出空间*/background:url(images/icon.gif) no-repeat left 25%;/*以背景图片方式添加项目符号*/margin:2px 0;
white-space: nowrap;/*为应用text-shadow做准备,禁止换行*/overflow: hidden;/*为应用text-shadow做准备,禁止文本溢出显示*/-o-text-overflow: ellipsis; /* Opera */text-overflow: ellipsis; /* IE, Safari (WebKit) */-moz-binding:url(‘ellipsis.xml#ellipsis‘); /* Firefox */}</style></head><body><dl><dt>体育新闻</dt><dd>姚明或将出席球迷签名会 火箭重返故地拉拢球迷10:58</dd><dd>申花恩朗遭足协追加停赛4场01:48 </dd><dd>体操世锦赛中国名单公布 陈一冰领军邹凯无缘出征10:52</dd><dd>罗雪娟恋情首度曝光 富二代辞职赴美陪读10:36 </dd><dd>广州亚运竞赛全接触 筹备工作正在按部就班进行09:53 </dd><dd>曝马拉多纳密会梅西寻支持 拼死重掌阿根廷教鞭10:25</dd><dd>李承鹏:我当足协主席也会贪污 有些脑残不懂09-28 15:17 </dd></dl></body></html>
演示效果:
语法:
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下,长串英文的部分内容就会被遮住。
实例:防止表格标题行换行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>word-wrap</title><styletype="text/css">h1{ font-size:16px; }table{/*色彩恬淡的细表格是设计的主流*/width:100%;
font-size:12px;
table-layout:fixed;/*定义表格在浏览器逐步解析和逐步呈现*/empty-cells:show;
border-collapse: collapse;
/*上面三行代码是设计表格的重要声明:table-layout:fixed能改变表格呈现性能;empty-cells:show;能够隐藏不必要的干扰因素;border-collapse:collapse能让表格看起来更精致*/margin:0 auto;
border:1px solid #cad9ea;
color:#666;
/*防止表格标题行换行*/word-break:keep-all ;/*禁止词断开显示*/word-wrap:break-word ;/*允许内容顶开指定的容器边界,如果声明了word-wrap:break-word;则会在IE浏览器中出现换行显示,会破坏整个标题行的样式*/white-space: nowrap;/*强迫在一行内显示*/}th{/*使用背景装饰列表头可以让表格看起来更别致*/background-image:url(images/th_bg1.gif);
background-repeat:repeat-x;
height:30px;
overflow:hidden;
}td{ height:20px; }/*适当撑起单元格,让数据看起来更轻松*/td, th{/*浅色线分割数据行和列,会让表格看起来更清爽,而不是那么生硬*/border:1px solid #cad9ea;
padding:01em 0;
}tr:nth-child(even){/*关键:通过结构伪类选择器为表格偶数行定义背景色,以实现隔行分色的效果*/background-color:#f5fafe;
}</style></head><body><h1>避免表格标题行换行显示</h1><tablesummary="设计优雅的数据表格"><tr><thnowrap="noerap">排名</th>/*添加nowrap="noerap"这一属性,确保在不同浏览器中能够更好的换行显示。注意,如果th定义了宽度,该属性将不再起作用*/
<thnowrap="noerap">校名</th><thnowrap="noerap">总得分</th><thnowrap="noerap">人才培养总得分</th><thnowrap="noerap">研究生培养得分</th><thnowrap="noerap">本科生培养得分</th><thnowrap="noerap">科学研究总得分</th><thnowrap="noerap">自然科学研究得分</th><thnowrap="noerap">社会科学研究得分</th><thnowrap="noerap">所属省份</th><thnowrap="noerap">分省排名</th><thnowrap="noerap">学校类型</th></tr><tr><td>1</td><td>清华大学 </td><td>296.77</td><td>128.92</td><td>93.83</td><td>35.09</td><td>167.85</td><td>148.47</td><td>19.38</td><tdwidth="16">京 </td><tdwidth="12">1 </td><td>理工 </td></tr><tr><td>2</td><td>北京大学 </td><td>222.02</td><td>102.11</td><td>66.08</td><td>36.03</td><td>119.91</td><td>86.78</td><td>33.13</td><td>京 </td><td>2 </td><td>综合 </td></tr><tr><td>3</td><td>浙江大学 </td><td>205.65</td><td>94.67</td><td>60.32</td><td>34.35</td><td>110.97</td><td>92.32</td><td>18.66</td><td>浙 </td><td>1</td><td>综合 </td></tr><tr><td>4</td><td>上海交大</td><td>150.98</td><td>67.08</td><td>47.13</td><td>19.95</td><td>83.89</td><td>77.49</td><td>6.41</td><td>沪 </td><td>1</td><td>综合 </td></tr><tr><td>5</td><td>南京大学</td><td>136.49</td><td>62.84</td><td>40.21</td><td>22.63</td><td>73.65</td><td>53.87</td><td>19.78</td><td>苏</td><td>1</td><td>综合 </td></tr><tr><td>6</td><td>复旦大学 </td><td>136.36</td><td>63.57</td><td>40.26</td><td>23.31</td><td>72.78</td><td>51.47</td><td>21.31</td><td>沪</td><td>2</td><td>综合 </td></tr><tr><td>7</td><td>华中科大</td><td>110.08</td><td>54.76</td><td>30.26</td><td>24.50</td><td>55.32</td><td>47.45</td><td>7.87</td><td>鄂 </td><td>1</td><td>理工 </td></tr><tr><td>8</td><td>武汉大学 </td><td>103.82</td><td>50.21</td><td>29.37</td><td>20.84</td><td>53.61</td><td>36.17</td><td>17.44</td><td>鄂 </td><td>2</td><td>综合</td></tr><tr><td>9</td><td>吉林大学 </td><td>96.44</td><td>48.61</td><td>25.74</td><td>22.87</td><td>47.83</td><td>38.13</td><td>9.70</td><td>吉 </td><td>1</td><td>综合</td></tr><tr><td>10</td><td>西安交大</td><td>92.82</td><td>47.22</td><td>24.54</td><td>22.68</td><td>45.60</td><td>35.47</td><td>10.13</td><td>陕</td><td>1</td><td>综合</td></tr></table></body></html>
演示效果:
-
换行显示的表格
-
防止表格标题换行
原文:http://blog.csdn.net/lovejulyer/article/details/51224367
内容总结
以上是互联网集市为您收集整理的《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop全部内容,希望文章能够帮你解决《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。