文字不换行,超出部分显示省略号

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39072332/article/details/78883946

这个效果常常会用到(其中文字占两行后超出隐藏为css3属性,且IE  、火狐不支持)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .content1{
      width:100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .content2{
      width:100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    </style>
  </head>
  <body>
    <div class="content1">
      我是文字我是文字我是文字我是文字
    </div>
    <div class="content2">
      我是文字我是文字我是文字我是文字
    </div> 
  </body>
</html>

如图:


展开阅读全文

没有更多推荐了,返回首页