對象內文本溢出時顯示省略標記(...)

時間 2019-11-13

標籤對象文本溢出顯示省略標記简体版

原文原文鏈接

<!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>無標題文檔</title>
<style type="text/css">
body{
font-size:14px;
color:#333;
}
/*通常的文字截斷（適用於內聯與塊）：*/
.textover{
display:block;/*內聯對象需加*/
width:300px;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;
/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
/*text-overflow:clip;*//* 內容超出寬度時直接截斷 */
}css

/*對於表格文字溢出的定義：*/
table{
width:300px;
table-layout:fixed;/* 只有定義了表格的佈局算法爲fixed，下面td的定義才能起做用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;
/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
/*text-overflow:clip;*//* 內容超出寬度時直接截斷 */
}html

/*設置列表(li)超出部分顯示省略號。注意：此方法適用與IE與OP瀏覽器*/
ul{
list-style:none;
padding:0;
margin:0;
}
li{
width:300px;
white-space:nowrap;
text-overflow:ellipsis;
/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/
/*text-overflow:clip;*//* 內容超出寬度時直接截斷 */
overflow: hidden;
}
</style>
</head>算法

<body>
通常：<br />
<span class="textover">
文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理
</span>
<span class="textover">
文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理
</span>
<br />
表格：<br />
<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td><a href="#">文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理</a>
    </td>
</tr>
<tr>
    <td><a href="#">文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理</a>
    </td>
</tr>
</table>
<br />
列表li：<br />
<ul>
<li>
文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理
</li>
<li>
文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理文字溢出時的自動隱藏處理
</li>
</ul>
</body>
</html>
瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。