CSS超出文本用省略号显示 兼容firefox IE6 IE7
第一种方法：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>css设置文字隐藏</title>
6 <style type="text/css">
7 .css1{
8 color:#6699ff;
9 border:1px #ff8000 dashed;
10 margin-bottom:20px;
11 width: 20em;/*不允许出现半汉字截断*/
12 }
13 .css{
14 overflow: hidden; /*自动隐藏文字*/
15 text-overflow: ellipsis;/*文字隐藏后添加省略号*/
16 white-space: nowrap;/*强制不换行*/
17 width: 20em;/*不允许出现半汉字截断*/
18 color:#6699ff;
19 border:1px #ff8000 dashed;
20 }
21 </style>
22 </head>
23 <body>
24 <div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
25 <div class="css">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
26 </body>
27 </html>
第二种方法:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>css写省略号方法</title>
6 <style>
7 ul{
8 width: 300px; /*UL 的宽度*/
9 margin: 40px auto;
10 padding: 12px 4px 12px 24px;
11 border: 1px solid #D4D4D4;
12 background: #F1F1F1;
13 list-style:none;
14 }
15 li{
16 margin: 12px 0;
17 }
18
19 li a{
20 display: block;
21 width: 220px; /* li 的宽度 这个控制显示多少字后显示...设的宽度大于字数时， 是不会显示...的 */
22 overflow: hidden; /*自动隐藏文字*/
23 white-space: nowrap; /*强制不换行*/
24 -o-text-overflow: ellipsis;
25 text-overflow: ellipsis; /*当对象文本溢出时显示...*/
26 /* text-overflow:clip;*/ /*当对象文本溢出时直接裁剪掉，会出现半汉字截断*/
27 }
28 li:not(p){
29 clear: both;
30 }
31 li:not(p) a{
32 max-width: 190px; /*只有FF识别*/
33 float: left;
34 }
35
36 li:not(p):after{
37 content: "..."; /*页面的后缀省略号*/
38 float: left; /*在每一行中向右浮动*/
39 width: 25px;
40 padding-left: 5px;
41 color: #000;
42 }
43 </style>
44 </head>
45
46 <body>
47 <ul>
48 <li><a href="#">是以奔驰、宝马、奥迪、保时捷为主的高端</a></li>
49 <li><a href="#">是以奔驰、宝马、奥迪、保时捷为主的高端</a></li>
50 <li><a href="#">是以奔驰、宝马、奥迪、保时捷为主的高端</a></li>
51 <li><a href="#">是以奔驰、宝马、奥迪、保时捷为主的高端</a></li>
52 <li><a href="#">是以奔驰、宝马、奥迪、保时捷为主的高端</a></li>
53 <li><a href="#">是以奔驰、宝马、奥迪、保时捷为主的高端</a></li>
54 <li><a href="#">是以奔驰、宝马、奥迪、保时捷为主的高端</a></li>
55 </ul>
56 </body>
57
58 </html>
原文地址：https://www.cnblogs.com/1301694f/p/8757407.html
时间： 2024-10-21 00:06:41