如何相应地截断数组的元素

Question

我正在尝试相应地截断不适合表单元格的元素。

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

结果看起来像这个

无名氏，无名氏，伊丽莎。。。

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

John Doe，Jane Do…

这是我使用的CSS

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

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

无名氏，无名氏，。。。

或

John Doe，。。。

Answer 1

我认为你需要一个外部元素，它有溢出：auto；以及指定的宽度。省略号不能是一个百分比。如果您需要它进行响应，则必须使用javascript并监听大小调整。类似的东西

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