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

最新推荐文章于 2024-08-31 21:39:38 发布

iteye_20151

最新推荐文章于 2024-08-31 21:39:38 发布

阅读量133

点赞数

分类专栏： css 要点文章标签： css text-overflow

本文链接：https://blog.csdn.net/iteye_20151/article/details/82617054

版权

css 要点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

效果图：
[img]http://dl.iteye.com/upload/picture/pic/132809/4ceb8994-05ff-3445-85de-c348490fb948.png[/img]

iteye_20151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css控制文字显示长度超过用省略号替代

[color=blue][size=medium]css控制文字显示长度超过用省略号替代[/size][/color]这样节省了服务器的开销，减轻服务器压力；这部分工作由客户端完成了，而且代码维护起来也方便了。[color=blue]text-overflow 属性[/color]CSS3 text-overflow 属性：[url]http://www.w3scho...
复制链接

扫一扫