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
