支持火狐的文本超出隐藏以省略号显示

最新推荐文章于 2023-01-10 21:16:55 发布

原创最新推荐文章于 2023-01-10 21:16:55 发布 · 6.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css+js

本文介绍了一种使用CSS来处理文本溢出的方法，通过设置特定的CSS样式，当文本长度超过设定范围时，多余部分将被省略并以省略号(...)表示。这种方法适用于网页布局中对文本长度有严格限制的情况。

<html>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
body{
    font-family:Arial, Helvetica, sans-serif;/*字体。*/
    font-size:12px;/*字体大小12像素。*/
}
div{
    width:200px;/*层的宽度。*/
    height:100px;/*层的高度。*/
    line-height:24px;/*行间距。*/
   position: relative;
    border:#ccc solid 1px;/*层边框为1像素灰色的实线。*/
    background-color:#F9F9F9;/*背景颜色*/
    margin:5px; /*距离周围都是5像素*/
}
div a{
    color:#000;
display:block;/*定义为块级*/
width:190px;/*要显示文字的宽度*/
float:left;/*左对齐*/
overflow:hidden; /*超出的部分隐藏起来。*/
line-height: 30px;
height: 60px;
font-size: 15px;
/*white-space:nowrap;*//*不显示的地方用省略号...代替*/
padding-right:7px; /*文字距离右侧7像素。*/
    text-overflow:ellipsis;/* 支持 IE */
    -o-text-overflow: ellipsis;    /* 支持 Opera */
   background: sandybrown;
}
div a:after{
   content:"...";
   position: absolute;
   right: 3px;
   top: 30px;
   }/* 支持 Firefox */
</style>
</head>

<body>
<div><a href="#">CSS截取字符串d用省略号，超出用省略号用省略号用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号用省略号用省略号代替</a></div>
</body>
</html>

标签

#css #火狐 #兼容性 #省略号