小伙伴们,对于省略号呢,咱们前端攻城狮的实现方法可就是多种多样了,那接下来呢我就给你罗列一下如果用css书写这些特殊效果,来一起看看吧~~~
1.单行文本超出显示省略号
效果图:
实现代码:
HTML部分
<h3>使用css实现单行省略号</h3>
<div class="box1">
<a href="#" class="a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ipsaexplicabo quos sapiente ea error, mollitia necessitatibus animi facere rem non sed velit aperiam laboriosamdebitis. Quae deleniti doloremque nisi.
</a>
</div>
CSS部分
h3 {
padding-left: 10px;
}
.a1 {
text-decoration: none;
color: #000;
padding-left: 20px;
}
.box1 {
height: 40px;
line-height: 40px;
background-image: linear-gradient(white, gray);
box-shadow: 0 0 2px 2px rgb(148, 145, 145);
box-sizing: border-box;
/* 单行显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
注:此案例为京东首页的部分切图,此时的省略号可以用上述代码实现
2.多行显示省略号
效果图:
HTML部分
<h3>使用css实现三行之后显示省略号</h3>
<div class="box2">
<a href="#" class="a1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta laudantium aspernatur illo id, beatae mollitia magnam, laboriosam cupiditate harum veritatis ullam delectus adipisci quasi, laborum ipsum quis est molestiae.
</a>
</div>
CSS部分
h3 {
padding-left: 10px;
}
.a1 {
text-decoration: none;
color: #000;
padding-left: 20px;
}
.box2 {
height: 60px;
line-height: 30px;
background-image: linear-gradient(white, gray);
box-shadow: 0 0 2px 2px rgb(148, 145, 145);
overflow: hidden;
/* 三行显示省略号 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
实际案例应用场景说明:
注:此时明显是折行后在第二行多余的部分显示省略号,那由于内容不固定字数不固定,所以需要动态设置,那么就应用到了上述的多行显示省略号的方法
3.内容中间显示省略号(方法一)
效果图:
HTML部分
<h3>使用css实现中间显示省略号方法一</h3>
<div class="box3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi perferendis iste sit! Et quos aspernatur suscipit ab qui? Cumque debitis fugiat ab fugit repudiandae, vel eius error nisi minus<span></span><a href="#">全文</a>
</div>
css部分
.box3 {
/* height: 120px; */
line-height: 30px;
background-image: linear-gradient(white, gray);
box-shadow: 0 0 2px 2px rgb(148, 145, 145);
}
.box3 span::after {
content: '......';
}
实际案例应用场景说明:
4.内容中间显示省略号(方法二)
效果图:
HTML部分
<h3>使用css实现中间显示省略号方法二</h3>
<div class="box4">
<a href="#">
<span class="span1" title="我是左侧内容我是左侧内容我是左侧内容">我是左侧内容我是左侧内容我是左侧内容</span>
<span class="span2" title="我是右侧内容我是右侧内容"></span>
</a>
</div>
css部分
.box4 {
height: 30px;
line-height: 30px;
background-image: linear-gradient(white, gray);
box-shadow: 0 0 2px 2px rgb(148, 145, 145);
}
.box4 .span1 {
float: left;
width: 62%;
height: 30px;
line-height: 30px;
overflow: hidden;
}
.box4 a {
color: #000;
}
.box4 .span2::before {
content: attr(title);
width: 38%;
float: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
/* 优化两个span中间的间距 */
.box4 {
text-align: justify;
}
实际案例应用场景说明:
综上所述:以上四种方案是目前页面中应用较多的实现省略号的方法,仅代表个人观点,如您有更优的方法欢迎联系我们。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。