欢迎访问畅维网络官网,我们将为您提供专业的网站建设服务!
咨询电话:0531-88162305 QQ:点击这里给我发消息
当前位置:首页 > 网站学院 > 网站技术

纯CSS超过宽度显示省略号

通过CSS来使元素中的文字超过了自己的宽度后用省略号来代替,主要涉及的CSS代码如下:

1
2
3
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

对于一般的div及li元素用上面的CSS即可实现超过宽度显示省略号,但对于table元素中的td,只用上面的CSS还不行,还需给table加上下面的CSS:

1
2
3
table {
table-layout: fixed;
}

只有通过修改table的table-layout,使表格以固定表格布局,才能实现超过宽度显示省略号效果,不然表格中的td虽然没有换行,但表格会随着内容不断变宽。具体关于 CSS table-layout属性的解释,可以上W3school进行查询。

下面贴出一个测试的页面HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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>
<title>纯CSS超过宽度显示省略号</title>
<style type="text/css">
ul {
width: 100px;
}
li {
width: 100px;
line-height: 25px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
</ul>
<br />
<table width="400px" border="1" bordercolor="#333333" cellpadding="0" cellspacing="0" bgcolor="#E8FFFF" style="table-layout:fixed">
<tr>
<td title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</td>
<td title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</td>
<td title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</td>
</tr>
</table>
<br />
<div style="white-space:nowrap;overflow: hidden;text-overflow: ellipsis; width:100px;" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</div>
</body>
</html>
(编辑:济南网站建设、济南网站建设公司:畅维网络)

鲁公网安备 37010502000788号

  • 扫一扫,关注微信公众号