你如何响应地截断数组的元素？

Question

我正在尝试响应式截断不适合 table 单元格的元素。

let names = ['John Doe', 'Jane Doe', 'Elizabeth Hendrickson', 'Simon James']

结果看起来像这样

John Doe,Jane Doe,Elizab...

而且，如果我把浏览器变小，它看起来像这样

李四、简多...

这是我用的CSS

.names {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我不想在示例中显示 Elizab 或 Jane Do。我想看到的是

John Doe,Jane Doe,...

或

李四，...

Answer 1

我相信你需要有一个外部元素，它有 overflow: auto;和指定的宽度。它不能是省略号起作用的百分比。如果你需要它响应，你必须使用 javascript 并监听调整大小。像

  <div style="width: 100px;overflow: auto">
    <div class="names">

    </div>
  </div>

How do you truncate elements of an array responsively?