文字超出部分省略号（1行和2行和多少个字内）

最新推荐文章于 2024-10-08 17:57:19 发布

XUYANBOYA

最新推荐文章于 2024-10-08 17:57:19 发布

阅读量92

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/XUYANBOYA/article/details/118367054

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   <style type="text/css">
   .ssa{
       width: 300px;
       height: 20px;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       word-break: break-all;
       background-color: bisque;}

   .ssb{
       width: 300px;
       height:42px;
       margin-top: 20px;
       text-overflow: -o-ellipsis-lastline;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       background-color: aliceblue;}

.ssc{
       width: 300px;
       height:42px;
       margin-top: 20px;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:24em;

}

   </style>
   </head>
   <body style="margin: 20px 40%;">
       <div class="ssa">北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</div>
       <div class="ssb">北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</div>
   </body>
</html>