使用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>