HTML设置超出部分隐藏

最新推荐文章于 2023-10-23 22:09:35 发布

weixin_30723433

最新推荐文章于 2023-10-23 22:09:35 发布

阅读量2.7k

点赞数

原文链接：http://www.cnblogs.com/gkl123/p/9896875.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>

转载于:https://www.cnblogs.com/gkl123/p/9896875.html

weixin_30723433

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML设置超出部分隐藏

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 ...
复制链接

扫一扫