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

时间:2016-11-18 17:54:35

标签: html css css3 flexbox ellipsis

我有以下布局:

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

Div1拥有属性flex-grow: 1,因此可以占用所需的所有可用空间。

当div1占用所需的所有空间时,当浏览器窗口变小时,span1应该得到省略号,而span2则不应该。

我该怎么做?我尝试过各种flex的使用,增加了更多的div,并且没有成功地改变宽度。

干杯。

1 个答案:

答案 0 :(得分:2)

我最终做的是将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)上的宽度