HTML设置超出部分隐藏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
 9             overflow: hidden; /*超出长度的文字隐藏*/
10             text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
11             white-space: nowrap; /*强制不换行*/
12         }
13     </style>
14 </head>
15 <body>
16     <div>
17         文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
18     </div>
19 </body>
20 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
 9             overflow: hidden;
10             /*出现省略号*/
11             text-overflow: ellipsis;
12             /*是在第几行*/
13             -webkit-line-clamp: 2;
14             display: -webkit-box;
15             -webkit-box-orient: vertical;
16         }
17     </style>
18 </head>
19 <body>
20     <div>
21         文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
22     </div>
23 </body>
24 </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
overflow: hidden; /*超出长度的文字隐藏*/
text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
white-space: nowrap; /*强制不换行*/
}
    </style>
</head>
<body>
    <div>
        文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
</div>
</body>
</html>

HTML设置超出部分隐藏

推荐阅读