單行文本溢出顯示省略號,可以直接使用
text-overflow:ellipsis; white-space:nowrap;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
多行文本溢出顯示省略號
方案一 使用webkit屬性-webkit-line-clamp(注意這是一個不規範的屬性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
方案二 通過::after僞類添加省略號(兼容性較好)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; position: relative;}
div::after{content: '...'; position: absolute; right: 0; bottom: 0; background-color: #FFF;}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
另外,也可以通過一些JS的方式解決,這裏不做闡述