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

时间：2016-04-26 21:48:50 阅读：308 评论：0 收藏：0 [点我收藏+]

标签：

通过阅读和学习书籍《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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
<style type="text/css">
dl {/*固定新闻栏目外框*/
    width:240px;
    border:solid 1px #ccc;
}
dt {/*设计新闻栏目标题行*/
    padding:8px 8px;
    background:#7FECAD url(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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>word-wrap</title>
<style type="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:0 1em 0;
}
tr:nth-child(even) {/*关键：通过结构伪类选择器为表格偶数行定义背景色，以实现隔行分色的效果*/
 background-color:#f5fafe;
}
</style>
</head>
<body>
<h1>避免表格标题行换行显示</h1>
<table summary="设计优雅的数据表格">
    <tr>
        <th nowrap="noerap">排名</th>/*添加nowrap="noerap"这一属性，确保在不同浏览器中能够更好的换行显示。注意，如果th定义了宽度，该属性将不再起作用*/
        <th nowrap="noerap">校名</th>
        <th nowrap="noerap">总得分</th>
        <th nowrap="noerap">人才培养总得分</th>
        <th nowrap="noerap">研究生培养得分</th>
        <th nowrap="noerap">本科生培养得分</th>
        <th nowrap="noerap">科学研究总得分</th>
        <th nowrap="noerap">自然科学研究得分</th>
        <th nowrap="noerap">社会科学研究得分</th>
        <th nowrap="noerap">所属省份</th>
        <th nowrap="noerap">分省排名</th>
        <th nowrap="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>
        <td width="16">京 </td>
        <td width="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>

演示效果：

换行显示的表格
防止表格标题换行

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

标签：

原文地址：http://blog.csdn.net/lovejulyer/article/details/51224367

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行