Flexbox弹性布局中的文本省略号实现

2020-07-2752次阅读flexbox

<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属性,所以省略号才能正确显示。

上一篇: setTimeout和setInterval方法皆有可选的第三参数  下一篇: backdrop-filter实现毛玻璃效果  

Flexbox弹性布局中的文本省略号实现相关文章