text-overflow:ellipsis 的应用（转载）

时间 2019-11-07

标签 text overflow ellipsis 应用转载栏目 HTML 繁體版

原文原文链接

关键字: text-overflow:ellipsiscss

语法：text-overflow : clip | ellipsishtml

取值：算法

clip ：默认值。不显示省略标记(...)，而是简单的裁切.布局

ellipsis：当对象内文本溢出时显示省略标记(...).ui

惋惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .spa

若是想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...orm

这样写：例如xml

Html代码htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#box{width:100px;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>
</body>
</html>

注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;必定要一块儿用对象

1.必定要给容器定义宽度.

2.若是少了overflow: hidden;文字会横向撑到容易的外面

3.若是少了white-space:nowrap;文字会把容器的高度往下撑；即便你定义了高度，省略号也不会出现，多余的文字会被裁切掉

4.若是少了text-overflow:ellipsis;多余的文字会被裁切掉，就至关于你这样定义text-overflow:clip.

若是容器是table，当文字内容过多时，不换行，而是出现...

这样写：例如

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table{table-layout:fixed;width:106px;}
td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

</body></html>

注意：

1.必定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed，下面td的定义才能起做用。

其它的要点和上面同样

text-overflow 的兼容性：

测过ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不兼容