超出的文字用省略,用…代替

原创

Q神 2022-07-22 12:15:01 博主文章分类：网页技巧 ©著作权

文章标签 css 字段 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者Q神的原创作品，请联系作者获取转载授权，否则将追究法律责任

方法一：

<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid #336699">

试试看，前面一段我知道，加上...倒还真的不知道，看看效果</div>

方法二：

<table width="550" border="0" cellpadding="5" cellspacing="1" bgcolor="#007373" style="table-layout:fixed">
<tr>
<th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List1</th>
<th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List2</th>
<th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List3</th>
</tr>
<tr>
<td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td>
<td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td>
<td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td>
</tr>
</table>