您的位置：首页 > 其它

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

2012-03-02 15:42 141 查看

<!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>

设置span 自动换 span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航