css控制文字显示长度超过用省略号替代

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #text-overflow

css 要点专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS3中的text-overflow属性结合其他样式属性（如white-space和overflow），来实现文本在超过指定宽度时使用省略号显示的效果。这种方法可以有效地减少服务器负载，并提高代码的可维护性。

[color=blue][size=medium]css控制文字显示长度超过用省略号替代[/size][/color]

这样节省了服务器的开销，减轻服务器压力；这部分工作由客户端完成了，而且代码维护起来也方便了。

[color=blue]text-overflow 属性[/color]

CSS3 text-overflow 属性：
[url]http://www.w3school.com.cn/cssref/pr_text-overflow.asp[/url]

来张效果图：

[img]http://dl.iteye.com/upload/picture/pic/132807/b7bec964-3e3e-3a48-9f1e-ef2363d28989.png[/img]

[color=blue][size=medium]一般还配合这个属性一块使用[/size][/color]
[color=blue]overflow: hidden;[/color]
[color=blue]white-space: nowrap;[/color]
CSS3 text-overflow 属性：
[url]http://www.w3school.com.cn/cssref/pr_text_white-space.asp[/url]

日常我们为了让文字内容在一行内显示完，哪怕宽度不够也不能换行，我们可以使用white-space样式，但如果遇到了html br强制换行标签，无论是设置white-space与否都会被<br>强制换行。

[color=blue][size=medium]表格里使用text-overflow后不能隐藏超出的文本的解决方法[/size][/color]

[url]http://www.jb51.net/css/145465.html[/url]


<!DOCTYPE html>
<html>
<head>
<style> 
td{ 
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 
border:1px solid;
} 
table{ 
border-collapse: collapse;
border:1px solid;
table-layout:fixed; 
} 
td:hover 
{ 
text-overflow:inherit; 
overflow:visible; 
} 
</style>
</head>
<body>

<table width="500" height="20"  >
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
</table>

</body>
<html>