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>