html - 没有空格时如何将文本溢出更改为省略号

Question

我有一个包含一些文本和一个按钮的容器，如下所示。容器顶部的文本是动态的。有时会很短，有时会更长。

在较大的屏幕上，它会有足够的空间来包含我想要的所有元素，即使文本分成第二行，如下图第一行所示。 (仅此而已)。

在较小的屏幕上，它甚至不能分到第二行，因为它的高度不足以包含所有内容。

我想做的是，如果有足够的空间可以分到第二行，文本应该分到第二行。

但如果空间不够，则应改为添加省略号。

有没有办法用纯 CSS 做到这一点？

Answer 1

.button {
  border:none;
  padding: 5px 10px;
  background-color: #000;
  color: #FFF;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100px;
}

<button class="button">This text is way to long for this button</button>