【CSS】超越两行显现省略号

2024年1月18日 172次阅读 来源: differ_wy

看到了个题目，题目地点：https://segmentfault.com/q/10…
现在没想到如何不必行高解决题目，然则想到了之前工作中碰到的文本超越两行显现省略号，所以从之前的代码里翻出代码段记录下来，便于以后运用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      .example{
        margin-right:20px;
        font-size: 20px;
        /*line-height: 1.5em;*/
      }
      .warp2{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div id="test" class="example warp2">
      如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文如图，如果在用户手机屏幕宽度下内容超越两行则显现浏览全文，不然不显现浏览全文
    </div>
    <script type="text/javascript">
      
    </script>
  </body>
</html>
    原文作者：differ_wy
    原文地址: https://segmentfault.com/a/1190000009187326
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞