1.單行文本溢出隱藏
<!DOCTYPE html>
<html>
<head>
<title>單行文本溢出隱藏</title>
<style type="text/css">
p{
white-space: nowrap;
/*強制文本一行顯示*/
overflow: hidden;
/*超出元素默認寬度隱藏*/
text-overflow: ellipsis;
/*使用省略號代表有內容未顯示*/
}
</style>
</head>
<body>
<p>
單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏單行文本溢出隱藏
</p>
</body>
</html>
2.多行文本溢出隱藏
<!DOCTYPE html>
<html>
<head>
<title>多行文本溢出隱藏</title>
<style type="text/css">
p{
height: 60px;
overflow: hidden;
line-height: 2em;
border: 1px solid red;
position: relative;
}
p::after{
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0px 10px 0px 10px;
background: #fff;
}
</style>
</head>
<body>
<p>
多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏多行文本溢出隱藏
</p>
</body>
</html>