关于前端页面设置省略号ellipsis和flex同时使用会无效的问题

问题：当内容超过宽度时，使用省略号...代替溢出的内容，并内容居中显示

使用css的text-overflow: ellipsis属性，可设置省略号，需要注意的是： 如果设置了display: flex，则换行无效。. 一定要设置宽度

 

方式一：不确定宽度居中，父级使用display: flex，那么子级.text设置了flex: 1就是设置了一个宽度，换行有效。

<div class="name">
  <div class="label">姓名</div>
  <div class="text">文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
 
// css部分
.name {
  display: flex;
   justify-content: center;
   align-items: center;
  .label {
    width: 140px;
  }
  .text {
      flex: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; 
  }
}

方式二：若确定了宽度，则设置父级.text的宽度，如：width: calc(100% - 140px); 

// html部分
<div class="name">
  <div class="label">姓名</view>
  <div class="text"><div class="text1">文本文本文本文本文本文本文本文本文本文本</div></div>
</div>
 
// css部分
.name {
  display: flex;
   justify-content: center;
   align-items: center;
  .label {
    width: 140px;
  }
  .text {
   width: calc(100% - 140px);
    .text1 {     
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
  }
}

原文地址：https://blog.csdn.net/weixin_43923808/article/details/140314315

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！