Text out of ellipsis type

Time:2021-1-31

1、 CSS text beyond hide and show ellipsis (one line)

overflow:hidden;  //Text hiding beyond
text- overflow:ellipsis;  //Overflow is shown with an ellipsis
white- space:nowrap;  //Overflow without line feed

2、 CSS text is hidden and ellipsis is displayed (two lines)

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;  //It is shown as a flexible box model.
-webkit-box- orient:vertical;  //Set the arrangement of the child elements of the telescopic box -- vertically from top to bottom
-webkit-line- clamp:2;  //Rows displayed

3、 JS text beyond the number of words to hide and show the ellipsis

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
< title > rookie tutorial( runoob.com )</title>
<style>
#learn{
width:600px;
overflow:hidden;
margin:0 auto;
}
span{
color:aqua
}
</style>
</head>
<body>

<div id ="learn"></div>

<script>
let learn = document.getElementById("learn")
Let value = "as a programmer, I naturally hope that all candidates can successfully pass the interview, but as an interviewer, I always have to be loyal to my duties and try to identify the candidates' real abilities. During the interview, the candidates who get their resumes are screened. That is to say, if the candidates can really be like the ones described in the resumes, they will certainly pass the interview. But in fact, many candidates are just "able to get their resumes". In this paper, from the perspective of senior interviewers, we will talk about some inspection points of how to identify candidates' ability in the interview, from which the majority of candidates' friends can further understand the preparation methods for the interview. In particular, for some students who have read several courses, you can take a comparative look at the checkpoints given in this article to see if your current prepared speech can stand the scrutiny of the interviewer. "
let newValue = ""
if(value>40){
  newValue = value.substring(0,40)+"..."
}else{
  newValue = value
}
learn.innerHtml  =Newvalue + '< span onclick = "clickradio" > read the full text < / span >`
function clickRadio(){
  alert("ok!")
}
</script>
 
</body>
</html>

4、 JS text is hidden if it exceeds the number of lines

/*
list=[
Number of rows,
"Number of rows, number of rows",
"Number of lines number of lines",
...
];
12: Width of each text
24: sum of each Li padding, margin
Boxwidth: box width
*/
let width = 0,
    line = 1,
    arr = [],
    boxWidth = 300;
list.map(val=>{
  if(line <= 3){
    let minWidth = val.length*12+24;
    if(minWidth > boxWidth){
      //Li the maximum width is the box width
      minWidth = boxWidth
    }
    width += minWidth;
    if(width >= boxWidth){
      line++;
      width = minWidth;
    }
    if(line < 4){
      arr.push(val)
    }
  }
})

Text out of ellipsis type

Recommended Today

This open source AI project can “tattoo with one click”. AI: do I want to lose face?

From: the heart of machine Sometimes, we need to cover some people’s tattoos to avoid being imitated. Sometimes people just simply wonder what some big stars would look like without tattoos. Vijish madhavan, a machine learning researcher from India, recently developed an open source machine learning tool skinddeep to meet our needs. Netizens also use […]