<div class="filename">
<span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
<span class="filename__extension">pdf</span>
</div>
.filename {
display: flex;
min-width: 0;
}
.filename__base {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filename__extension {
flex-shrink: 0;
}
省略号效果可以通过text-overflow,white-space和overflow属性组合来实现。
Flexbox弹性布局中的文本省略号实现技巧是使用属性min-width:0。根据Flexbox规范:
Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.
…
In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion.
注意:表示自动最小大小的auto关键字是minwidth和minheight属性的新初始值。关键字以前在本规范中定义,但现在在CSS调整模块中定义。
…
通常,基于内容的flex项目的最小大小是其内容大小建议和指定大小建议中较小的一个。
通过使用min-width: 0,我们更改了flexbox容器的最小尺寸,这将调整不使用该flex-shrink属性的容器的子元素的大小。由于filename__base元素有text-overflow,white-space和overflow属性,所以省略号才能正确显示。