如果div已满，如何中断数组填充div

Question

我想问一个关于数组和HTMLdiv的问题。

如果我有一个数组：

const exampleArray = ['Germany','Australia','Canada','Mongolia','Argentina','China'];

假设我有一个这样的div，最大长度约为100px(很抱歉表看起来很长，我无法在堆栈溢出时格式化它(

| A div |
| -------- | 

我想尽可能多地填充div，但如果它溢出，我希望它停止并以'，…结束。。。5'该数字是它无法打印的数组项目的数量

例如：

| Germany, Australia, Canada, ... 2|
| -------- | 

不是：

| Germany, Australia, Canada, Mong... 2|
| --------- | 

有人能告诉我们实现这一点的最佳方式是什么吗？

Answer 1

假设您希望省略号和括号内的数字在100px以内，则此代码段不断添加一个数组项及其逗号，计算省略号的宽度和括号内剩余计数，如果合适，则继续。

如果它变得太大，则会恢复到以前的内容并显示该内容。

注意：在我的例子中，100px相当窄——至少省略号加括号中的数字至少需要30px，所以这个片段将只显示一个国家名称。尝试使用200px或更小的字体大小来测试更多内容。

const exampleArray = ['Germany','Australia','Canada','Mongolia','Argentina','China'];
const div = document.querySelector('#list');
const endbit = document.querySelector('#endbit');
let i, endbitLength;
let divPrev = '';
let endbitPrev = '';
for (i = 0; i< exampleArray.length; i++) {
endbitPrev = endbit.innerHTML;
endbit.innerHTML = '...(' + (exampleArray.length - i) +')';
endbitLength = endbit.offsetWidth;
div.innerHTML = divPrev + exampleArray[i] + ', ';
if (div.offsetWidth > (100 - endbitLength)) {
break;
}
else {
divPrev = divPrev + exampleArray[i] + ', ';
endbitPrev = '...' + '(' + (exampleArray.length - i) + ')';
}
}
endbit.style.display = 'none';
div.innerHTML = divPrev + endbitPrev;

div {
display: inline-block;
}

<div id="list"></div>
<div id="endbit">...</div>

Answer 2

如果你可以在div中添加一个span，那么就可以了。我知道有更好的方法可以做到这一点，但你现在可以尝试这个函数

function addToDiv(arr) {
const div = document.querySelector("#div");
const span = div.firstElementChild;
const divWidth = div.clientWidth;
let finalIndex = 0;
let remaining = 0;
for (const [index,c] of arr.entries())
{ 
span.append(c)
if(span.offsetWidth >= divWidth){
finalIndex = index-1;
remaining = arr.length - index;
break;
}
if(index != arr.length -1)
span.append(', ')
}

if(!remaining) return;
span.textContent = '';
for (const [index,c] of arr.entries())
{
if(index > finalIndex) break;
span.append(c+', ')
}
span.append('...'+remaining)

}

它会定期检查跨度的宽度是否超过div的宽度。我在这里写了一个小提琴

https://jsfiddle.net/10fbkmg5/4/

您可以通过更改div的宽度来检查它是否符合您的要求。

Answer 3

您可以通过使用以下示例来实现您想要的结果，这只是您需求的参考，只需根据需要更改代码或逻辑即可。

const exampleArray = ['Germany','Australia','Canada','Mongolia','Argentina','China'];
var width=$(".tobefilled").width();
var news=exampleArray.slice(0,-width/15);
var remaining=exampleArray.length-news.length;
$(".tobefilled").html(news+",..."+remaining);

.tobefilled{
width:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tobefilled"></div>

Answer 4

您可以创建一个克隆来测量适合的项目数量，下面是一个示例：

const exampleArray = ['Germany', 'Australia', 'Canada', 'Mongolia', 'Argentina', 'China'];
const target = document.querySelector('#target');
const temp = target.cloneNode();
temp.style.whiteSpace = 'nowrap';
temp.style.visibility = 'hidden';
target.parentElement.append(temp);
const content = exampleArray.filter((v, i, arr) => {
temp.textContent = arr.slice(0, i + 1).join(', ');
if (temp.scrollWidth <= target.clientWidth) {
// Make sure that this is the last element or if it is not, that the ellipsis still fits.
if (i === (arr.length - 1)) {
return true;
} else {
temp.textContent += ` ... ${arr.length - (i + 1)}`;
if (temp.scrollWidth <= target.clientWidth) {
return true;
}
}
}
});
const restCount = exampleArray.length - content.length;
target.textContent = content.join(', ')
if (restCount) {
target.textContent += ` ... ${restCount}`;
}

#target {
width: 200px;
}

<div id="parent">
<div id="target"></div>
</div>

它的作用是：

• 克隆#target元素
• 将克隆添加到此元素的父元素(以最大限度地提高更改，使其具有相同的样式(
• 筛选字符串数组。filter函数将当前迭代索引之前的所有字符串添加到克隆，并检查克隆的宽度是否大于原始元素，它还确保到目前为止的所有项目以及省略号文本都适合
• 然后，过滤操作的结果用于设置原始元素的文本，并计算剩余元素(如果有的话，不适合的元素(的计数