單行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行：（webkit與移動端）
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
多行：（適用於所有）
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
* 被省略元素的高度：（字號 * 行高 * 到n行就省略）
* ::after偽元素的寬度：(字號 * 2)
* ::after偽元素的高度：(字號 * 行高)
* ::after偽元素的背景色：(被省略元素的背景色)
*/
p{
position: relative;
max-width: 400px;
max-height: 48px;
margin-bottom: 20px;
font-size: 16px;
line-height: 1.5;
overflow: hidden;
box-shadow: 1px 1px 6px #ccc;
}
p.ellipsis::after{
content: '...';
position: absolute;
bottom: 0;
right: 0;
display: block;
width: 32px;
height: 24px;
padding-left: 40px;
color: #999;
background: linear-gradient(to right, transparent 34%, #fff 55%);
}
</style>
</head>
<body>
<p class="ellipsis">
如果實現單行文本的溢出顯示dd 省略
</p>
<p class="ellipsis">
如果實現單行文本的溢出顯示省略號同學如果實現學如果實現學如果實現
</p>
<p class="ellipsis">
前端，官方的定bai義是前端就是網du站前台部分，運行在PC端，移動端等瀏覽zhi器上展現給用戶瀏覽的dao網頁
</p>
<p class="ellipsis">
用自己的話來說，前端是網頁給訪問網站的人看的內容和頁面。那前端開發顧名思義就是這些內容和頁面中代碼的實現。不過現在的前端不完全就是網頁設計，早年的網頁設計主要是以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。而現在的前端開發使得現代網頁更加美觀，交互效果顯著，功能更加強大。所以現在的前端開發，運用到的知識面更加廣泛，難度也更大。
</p>
<script type="text/javascript">
window.onload = () => {
const ellipsisDomArr = document.querySelectorAll('.ellipsis'); // 獲取所以需要省略的節點
const maxLen = ( 400 / 16 ) * 2 * 2 ; // 獲取最大字節長度
const maxW = 48 ; // 需要省略的高度 （也就是元素的最大高度：max-height）
ellipsisDomArr.forEach((item) => {
const itemH = item.getClientRects()[0].height;
/* 如果元素的高度小於最大高度，或者等於最大高度但是沒撐滿最后一行，都不顯示省略符號*/
if(itemH < maxW || computedStrLen(item.textContent) < maxLen){
item.removeAttribute('class','ellipsis');
}
})
}
//計算字符串長度，英文1個字符，中文2個字符
computedStrLen = (str) => {
var len = 0;
for (var i = 0; i < str.length; i++) {
var c = str.charCodeAt(i);
//單字節加1
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
len++;
}
else {
len += 2;
}
}
console.log(len)
return len;
}
</script>
</body>
</html>
附：
字節計算方法的博文：正則表達式：備注名稱長...