Flex布局导致text ellipsis失效问题解决

文本超出显示省略号在日常开发中还是有不少这样的需求的。

举个例子：单行文本溢出显示省略号

div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

效果如下：

前端资源网前端资源网

但是，如果使用 flex 布局就会发现，文本溢出显示省略号失效了：

前端资源网前端资源网

flex 布局也是是前端经常使用的一种弹性布局方式，简单便捷且有效，但是在使用 flex 布局的元素中不能同时使用文字溢出隐藏，也就是两者不能同时出现在同一标签中。

解决办法也很简单，只要保证 flex 布局和超出隐藏的内容不在同级元素中就可以，可以在文字外部多包裹一层标签。

<p>   
  <!-- 我们在这一层的标签进行flex布局 -->
    <span>  <!-- 这一层的标签我们引入文字过长隐藏的样式 -->
      <!-- 文本 -->
  </span>
</p>

代码实现：

<style>
  p {
    display: flex;
    width: 100px;
    white-space:nowrap
  }
  span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<p>
  <span>前端资源网前端资源网</span>
</p>

效果如下：

前端资源网前端资源网

未经允许不得转载：前端资源网 - w3h5 » Flex布局导致text ellipsis失效问题解决