小伙伴们,对于省略号呢,咱们前端攻城狮的实现方法可就是多种多样了,那接下来呢我就给你罗列一下如果用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; }
实际案例应用场景说明:

综上所述:以上四种方案是目前页面中应用较多的实现省略号的方法,仅代表个人观点,如您有更优的方法欢迎联系我们。

技术
©2019-2020 Toolsou All rights reserved,
程序员的520,送给女友的几行漂亮的代码(python版)基于stm32控制四轮小车电机驱动(一)linux查看磁盘空间命令实验四 自动化测试工具-软件测试axios拦截器封装与使用C语言——qsort函数opencv-python傅里叶变换以及逆变换在算法研究过程中如何进行算法创新nc的安装和简单操作C语言做一个简易的登陆验证(功能)界面