您的位置：首页 > 其它

div或table内容超出宽度时隐藏并显示省略标记

2013-04-23 12:56 811 查看

有了这个方法，不再因为截取字符串时编码问题而烦恼了，O(∩_∩)O~
Html代码
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

例子：

<!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=utf-8" />
<title>无标题文档</title>
<style>
.TableWord {
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
.TableWord td{
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.DivWord {
border:1px #0CF solid;
width:30%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="TableWord">
<tr>
<td width="50">qwerty7u89o0p</td>
<td width="100">qwertyui</td>
<td width="100">sxdcfvgbhnjkl;</td>
<td>wertyuioaqwsertyu8i9oplkjgfdsasdrtyuioppoiuytrewq</td>
<td width="100">sdfghjkl</td>
</tr>
</table>
<div class="DivWord">wertyuioaqwsertyu8i9oplkjgfdsasdrtyuioppoiuytrewq</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航