将省略号应用于一个子元素而不是另一个

【问题标题】：Applying ellipsis to one child element but not the other将省略号应用于一个子元素而不是另一个
【发布时间】：2016-11-18 17:54:35
【问题描述】：

我有以下布局：

<div>
  <div1>
    <span1></span>
    <span2></span>
  </div>
  <div2>
    <span></span>
    <span></span>
  </div>
</div>

Div1 具有属性flex-grow: 1，因此它可以占用它需要的所有可用空间。

当 div1 占用了它需要的所有空间并且浏览器窗口变小时，span1 应该得到省略号，而 span2 不应该。

我该怎么做？我尝试过各种 flex 用法，添加更多 div 和更改宽度，但均未成功。

干杯。

【问题讨论】：

【解决方案1】：

我最终将 span1 和 span2 都变成了 div。在 span2(div2) 上设置硬编码宽度，然后将 span1(div1) 上的宽度设置为

max-width: -moz-calc(100% - 110px);
max-width: -webkit-calc(100% - 110px);
max-width: -o-calc(100% - 110px);
max-width: calc(100% - 110px);

其中 110px 是 span2(div2) 上的宽度

【讨论】：