一行左中右自适应flex布局

最新推荐文章于 2024-07-20 11:00:00 发布

qq_25501109

最新推荐文章于 2024-07-20 11:00:00 发布

阅读量399

点赞数 5

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/qq_25501109/article/details/137604414

版权

文章探讨了如何在CSS中实现单行文本的自适应省略显示，以及遇到两行省略时的挑战。作者给出了一个代码示例，并求助于开发者解决`.left`元素的绿色背景两行省略问题。

摘要由CSDN通过智能技术生成

效果如下：单行的左边自适应省略号，中间都展示，右边都展示

但是左边绿色的自适应如果要两行省略号的话就没办法实现

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //使用自适应布局
-webkit-line-clamp: 2; //设置超出行数，要设置超出几行显示省略号就把这里改成几
-webkit-box-orient: vertical;
white-space: nowrap;

希望广大码神能指教一二

<div class="footer">
              <div class="left">
                leftleftleftleftleftleftleftleftleftleftleftleftleft
              </div>
              <div class="right">
                rightrightrightrightrightrighthtright
              </div>
</div>


.footer {
    display: flex;
    overflow: hidden;
    flex: 1;
  }
  .left {
    background: #3cc8b4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right {
    background: #9bc;
  }