flex布局里超出部分不显示...的解决办法

2023-12-03 15:48 2023-12-18 01:58 标签：div,css,flex

我们都知道，如果想设置文字超出一行显示...的办法是使用css的这三个属性
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis;
然而设置后在flex布局中却不起作用...

设置块属性flex: 1即可

<div class="item">
   <a href="../15/95.html">flex布局里超出部分不显示...的解决办法</a>
</div>

.item { 
  padding: 4px 0; 
  font-size: 14px; 
  display: flex;
}

.item a{
  flex:1;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;
}