使用 CSS 防止垂直溢出

Question

我使用这个代码：

.truncated-filename {
    max-width: 100px;
    text-overflow: ellipsis;
}

为了防止文件名对于盒子来说太长。但是，似乎存在垂直溢出问题。我怎样才能让它只把点放在最上面一行？

Answer 1

看来您需要添加 overflow: hidden 和 white-space: nowrap。

文本不会被截断，除非它不换行，这就是为什么您需要 white-space: nowrap 和 overflow 值而不是 visible.

.truncated-filename {
  border: 1px solid;
  display: inline-block;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<span class="truncated-filename">10128-teach-vector.png</span>

使用 CSS 防止垂直溢出

Prevent vertical overflow with CSS

css

overflow