带有多个元素的CSS文本溢出省略号

Question

这是我想要做的：

1. 将一些文字和一个按钮放在同一行并对齐中心
2. 当缩小屏幕尺寸时，在文本溢出：省略号生效时始终保持按钮显示

到目前为止，我所做的不能保持按钮显示。省略号仅在窗口边缘到达文本时才开始工作。

HTML：

<div class="wrapper">
  <span>
    foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar 
  </span>
  <button type="button">Download</button>
</div>

CSS：

.wrapper {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #b3ffcb;
}

JSFiddle Demo

任何人都知道如何解决这个问题？

Answer 1

您可以在包装上使用Flexbox并在text-overflow: ellipsis Fiddle

上应用span

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #b3ffcb;
}
span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapper">
  <span>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </span>
  <button type="button">Download</button>
</div>