Guys , What about the ellipsis , Our front-end siege lion can be implemented in a variety of ways , Then next, I'll give you a list if you use css Write these special effects , Come and have a look ~~~

<>1. Single line text exceeds display ellipsis

design sketch :

Implementation code :

HTML part
<h3> use css Implement single line ellipsis </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 part
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; /* Single line display ellipsis */ overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
notes : This case is a partial cutaway of JD home page , The ellipsis at this time can be implemented with the above code

<>2. Multiline display ellipsis

design sketch :

HTML part
<h3> use css Display ellipsis after three lines </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 part
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; /* Three lines display ellipsis */ display: -webkit-box;
-webkit-box-orient: vertical; -webkit-line-clamp: 2; }
Description of application scenarios of actual cases :

notes : At this time, it is obvious that the ellipsis is displayed in the redundant part of the second line after line folding , Because the content is not fixed, the number of words is not fixed , Therefore, dynamic setting is required , This applies to the above method of displaying ellipsis in multiple lines

<>3. Show ellipsis in the middle of content ( Method 1 )

design sketch :

HTML part
<h3> use css Method 1 for realizing middle display ellipsis </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="#"> full text </a> </div>
css part
.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: '......'; }
Description of application scenarios of actual cases :

<>4. Show ellipsis in the middle of content ( Method II )

design sketch :

HTML part
<h3> use css Method 2 for realizing the middle display ellipsis </h3> <div class="box4"> <a href="#"> <span class="span1"
title=" I am the left content I am the left content I am the left content "> I am the left content I am the left content I am the left content </span> <span class="span2"
title=" I am the right content I am the right content "></span> </a> </div>
css part
.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; } ​ /*
Optimize two span Middle spacing */ .box4 { text-align: justify; }
Description of application scenarios of actual cases :

in summary : The above four schemes are the most commonly used methods to implement ellipsis on the current page , Personal opinion only , If you have better methods, please contact us .

Technology
©2019-2020 Toolsou All rights reserved,
evo Tool usage problems ——Degenerate covariance rank, Umeyama alignment is not possible Experiment 4 Automated test tools - software test mysql Export data sql sentence _mysql according to sql Query statement export data Create a thread ——— Javaweb (3) Data structure experiment ( three )—— Stacks and queues TS stay vue2 Writing in the project web Front end signature plug-in _signature_pad Plug in implements electronic signature function docker Where is the image stored Qt Getting Started tutorial 【 Basic controls 】QCalendarWidget calendar control springboot How to get reality in ip address