flex布局后文本过长显示省略号

最新推荐文章于 2024-05-10 10:16:57 发布

y向日葵

最新推荐文章于 2024-05-10 10:16:57 发布

阅读量634

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_38058176/article/details/126536248

版权

图示：
在这里插入图片描述

html：

    <div class="cehsi">
      <div class="left">左侧</div>
      <div class="right">fasdfasgdsdgfasdfasdfasdfasdfasdfasdfasdfsdfadsfsadfsa</div>
    </div>

css：

.cehsi {
  width: 200px;
  height: 40px;
  border: 1px solid #f00;
  display: flex;
  align-items: center;
  .left {
    width: 40px;
    margin-right: 10px;
    background: #ccc;
    flex-shrink: 0;
  }
  .right {
    flex: 1;
    // flex布局，文字超出显示省略号
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}