文字溢出时的自动隐藏处理(显示省略标记...)
文字溢出时的自动隐藏处理(显示省略标记...)
<!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;*//* 内容超出宽度时直接截断 */
}
/*对于表格文字溢出的定义：*/
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;*//* 内容超出宽度时直接截断 */
}
/*设置列表(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>
<!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;*//* 内容超出宽度时直接截断 */
}
/*对于表格文字溢出的定义：*/
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;*//* 内容超出宽度时直接截断 */
}
/*设置列表(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>