根据框宽显示数组中的数据

Question

我有一个项目数组，它将显示在一个宽度为500px的框中。假设数组是[john, johnbbab, johnabraham]，如果文本溢出，我需要显示完整的字符串或相应的省略号。如果盒子里装不下第二个项目，即johnbbbab，盒子里的内容看起来就像[john，…]。

我面临的问题是确定如何渲染这取决于文本的宽度假设字体大小为10px。

PS:需要这样做是Javascript

Answer 1

哼，你不能把这些名字和一个类放在一起吗?这样，你就可以遍历它们并计算它们的宽度之和。您可以检查总和是否大于或小于父值，并根据需要进行更改。

不需要知道font-size或box的宽度。

Answer 2

您可以使用flexbox并根据div的宽度设置div内容。您可以尝试调整它以满足您的需求

// short width 190px
// const list = ["john", "johnbbab", "johnabraham"];
// long width 491
const list = ["john", "johnbbab", "johnabraham", "peterparker","johnsnow","josemourinho","olegunnar"]; 

// if width is short
document.getElementById("names").innerHTML = list;
// you can set maybe 190px as width to shrink the names
if (document.getElementById("names").offsetWidth > 190) {
document.getElementById("names").innerHTML = `${list[0]}...`;
}

#names {
width: fit-content;
background-color: green;
padding: 5px;
color: white;
}

<div id="names" ></div>