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

【问题标题】：Display data from an array depending on box width根据框宽显示数组中的数据
【发布时间】：2021-10-20 07:56:26
【问题描述】：

我有一组要显示在宽度为 500 像素的框中的项目。假设数组是 [john, johnbbab, johnabraham]，如果文本溢出，我需要显示完整的字符串或相应地给出省略号。例如：如果盒子不能容纳第二个项目，即 johnbbab，则盒子的内容将类似于 [john, ...]。

我面临的问题是，假设字体大小为 10px，则根据文本的宽度确定如何呈现。

PS：需要做的是Javascript

【问题讨论】：

到目前为止你尝试了什么？
考虑到文本的字体大小，我正在遍历数组检查当前长度是否超过 500/10 像素，并将字符串添加到结果变量中。如果是，那么我丢弃循环并打印结果。
css 呢？文本溢出：省略号；没关系。我刚刚注意到你的PS
知道了。编写了一个可以计算文本宽度的函数，并使用循环遍历数组检查宽度是否超过。检查此链接以供参考：stackoverflow.com/questions/58704990/…

标签： javascript string

【解决方案1】：

嗯，你不能把这些名字放在一个班级里吗？这样，您可以遍历所有内容并计算它们的宽度之和。您可以检查总和是高于还是低于父级，并在需要时进行更改。

不需要知道字体大小或框的宽度。

【讨论】：

【解决方案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;
}

&lt;div id="names" &gt;&lt;/div&gt;

【讨论】：