关于javascript:文字超出省略号类型

91次阅读

共计 1354 个字符，预计需要花费 4 分钟才能阅读完成。

overflow:hidden; // 超出的文本暗藏
text-overflow:ellipsis; // 溢出用省略号显示
white-space:nowrap; // 溢出不换行

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; // 作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列形式 -- 从上到下垂直排列
-webkit-line-clamp:2; // 显示的行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 菜鸟教程 (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 = "同样作为程序员，我天然心愿所有的候选人都能胜利通过面试，但作为面试官总是要忠于职责，尽量甄别出候选人的实在能力。面试时，拿到手的候选人简历是通过筛选的，也就是说，如果候选人真的能像简历上所形容的那样，那么肯定能过面试，但事实上不少候选人仅仅是“简历拿得出手”而已。在本文里，将站在资深面试官的角度，讲述如何在面试中甄别候选人能力的若干考查要点，从中宽广候选人敌人能进一步理解面试的筹备形式。特地地，对于一些看了若干课程的同学，你们能够对照地看下本文里给出的检查点，看下你们以后的筹备说辞是否经得起面试官的斟酌。"
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>

/*
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)
    }
  }
})

文字超出省略号类型

正文完