当ellipsis遇到flex布局

1. 问题描述

在项目开发中遇到一个这样的场景，如下图所示：

一个裁判文书item，分为2个部分：左边是的相关信息，右边是查看详情按钮。由于页面的宽度是不固定的，所以图中判决结果的宽度也是不固定的。要求判决结果的内容过长时，显示省略号。

2. 遇到坑

html代码：

<div class="judgement-doc-item display-flex">
  <div class="item-info flex-1">
    ...
    <div class="ellipsis">
      <label>判决结果：<label>
      <span>浙江省嘉善县人民法院 刑 事 判 决 书（2001） 善刑初字第180号 公诉机关浙江省嘉善县人民检察院。被告人孙某，原嘉善县魏塘镇工业办公室经济发展科副科长，曾任嘉善县魏塘镇第二工业公司经理。</span>
    </div>
      ...
  </div>
  <span class="btn-detail">查看详情</span>
</div>

css代码：

.display-flex {
  display: flex:
}

.flex-1 {
  flex: 1
}

.item-info {
  ...
}

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

运行后效果，如下：

这并非我所期待的结果，判决结果的内容并没有截断，显示省略号，而是一字排开，把父元素、父元素的父元素也撑开了，导致查看详情按钮跑出了可见范围内。

3. 不断尝试

3.1 尝试1

给.ellipsis设置一个max-width: 1020px（页面宽度为1200px时，减去边距和按钮的宽度，相关信息的宽度大概剩下1020px），运行效果如下：

3.2 尝试2

给.item-info设置一个max-width: 1020px，运行效果如下：

3.3 尝试3

虽然尝试1和尝试2能让判决内容过长时，显示省略号，但当页面宽度变得很大时，查看详情按钮右边会出现大片空白，运行效果如下：

突发奇想，把.item-info的max-width: 1020px;改为min-width: 1020px;试试，运行效果如下：

居然没问题，页面宽度变大时，查看详情按钮右边也不会出现空白。

3.4 尝试4

把.item-info的min-width设置为0，运行结果同3.3。至此，算是比较完美的解决了这个问题。

4. 结束语

在flex布局下使用ellipsis，这个过程对我来说有些曲折，希望这篇文章对大家有所帮助。