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>HTML中超出的内容显示为省略号
原文地址：https://www.cnblogs.com/1301694f/p/8757407.html