一.css文本超出就隐藏并且显示省略号(一行)
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
二.css文本超出就隐藏并且显示省略号(两行)
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行
三.js文本超出字数就隐藏并且显示省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#learn{
600px;
overflow:hidden;
margin:0 auto;
}
span{
color:aqua
}
</style>
</head>
<body>
<div id ="learn"></div>
<script>
let learn = document.getElementById("learn")
let value = "同样作为程序员，我自然希望所有的候选人都能成功通过面试，但作为面试官总是要忠于职责，尽量甄别出候选人的真实能力。面试时，拿到手的候选人简历是通过筛选的，也就是说，如果候选人真的能像简历上所描述的那样，那么一定能过面试，但事实上不少候选人仅仅是“简历拿得出手”而已。在本文里，将站在资深面试官的角度，讲述如何在面试中甄别候选人能力的若干考察要点，从中广大候选人朋友能进一步了解面试的准备方式。特别地，对于一些看了若干课程的同学，你们可以对照地看下本文里给出的检查点，看下你们当前的准备说辞能否经得起面试官的推敲。"
let newValue = ""
if(value>40){
newValue = value.substring(0,40)+"..."
}else{
newValue = value
}
learn.innerHtml = newValue + `<span onclick="clickRadio">阅读全文</span>`
function clickRadio(){
alert("ok!")
}
</script>
</body>
</html>
四.js文本超出行数就隐藏
/*
list=[
"行数",
"行数行数",
"行数行数行数",
...
];
12:每个文字宽度
24:每个li padding,margin的和
boxWidth:盒子宽度
*/
let width = 0,
line = 1,
arr = [],
boxWidth = 300;
list.map(val=>{
if(line <= 3){
let minWidth = val.length*12+24;
if(minWidth > boxWidth){
//li最大宽度为盒子宽度
minWidth = boxWidth
}
width += minWidth;
if(width >= boxWidth){
line++;
width = minWidth;
}
if(line < 4){
arr.push(val)
}
}
})
文字超出省略号类型