一.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{
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>
四.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)
}
}
})
文字超出省略號類型
