如何使用 javascript 和 css 显示固定为 div 宽度的字符串数组中剩余文本的数量 + 更多?
How can show number + more of remain text from string array fixed to div width by using javascript and css?
我想在 div 中显示以逗号分隔的字符串数组具有宽度(例如:300 像素)。当文本长度超过div宽度时,会显示文本有三个点和+(数组中剩余文本的数量),如上图。
谢谢。
尝试在您的 div 上使用它:
text-overflow: ellipsis;
这个怎么样?
var main = document.querySelector('main');
var p = document.querySelector('p');
var stringArr = ['Apple', 'Grape fruit', 'Orange', 'Banana', 'KiwiJuice', 'Tangerine'];
function dotdotdot(list){
var ix, ixLen, listLen;
var span = document.createElement('span');
span.textContent = ' + ';
// 1. insert a text into an element
// 2. compare the scrollWidth and the clientWidth
// if scrollWidth is bigger than the other, it means the text has been overflowed
// 3. find the index of the text which has been overflowed
// 4. insert <span>+ ?more</span>
// * when compare two scrollWidths, consider the width of <span> because of the max-width of <main> tag.
// * the width of <span> is set by 150 px as an example.
for(ix = 0, ixLen = list.length; ix < ixLen; ix++){
if(ix !== ixLen - 1){
//main.textContent += list[ix] + ', ';
p.textContent += list[ix] + ', ';
}else{
//main.textContent += list[ix];
p.textContent += list[ix];
}
if(p.scrollWidth > main.scrollWidth - 150){
//p.style.overflow = 'hidden';
//p.style.textOverflow = 'ellipsis';
p.style.width = p.clientWidth + 'px';
span.textContent += list.length - (ix + 1);
span.textContent += 'more';
main.append(span);
return;
}
}
}
dotdotdot(stringArr);
main {
max-width: 300px;
height: 30px;
border: 1px solid #000000;
}
p {
display: inline-block;
width: fit-content;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<main>
<p></p>
</main>
我想在 div 中显示以逗号分隔的字符串数组具有宽度(例如:300 像素)。当文本长度超过div宽度时,会显示文本有三个点和+(数组中剩余文本的数量),如上图。
谢谢。
尝试在您的 div 上使用它:
text-overflow: ellipsis;
这个怎么样?
var main = document.querySelector('main');
var p = document.querySelector('p');
var stringArr = ['Apple', 'Grape fruit', 'Orange', 'Banana', 'KiwiJuice', 'Tangerine'];
function dotdotdot(list){
var ix, ixLen, listLen;
var span = document.createElement('span');
span.textContent = ' + ';
// 1. insert a text into an element
// 2. compare the scrollWidth and the clientWidth
// if scrollWidth is bigger than the other, it means the text has been overflowed
// 3. find the index of the text which has been overflowed
// 4. insert <span>+ ?more</span>
// * when compare two scrollWidths, consider the width of <span> because of the max-width of <main> tag.
// * the width of <span> is set by 150 px as an example.
for(ix = 0, ixLen = list.length; ix < ixLen; ix++){
if(ix !== ixLen - 1){
//main.textContent += list[ix] + ', ';
p.textContent += list[ix] + ', ';
}else{
//main.textContent += list[ix];
p.textContent += list[ix];
}
if(p.scrollWidth > main.scrollWidth - 150){
//p.style.overflow = 'hidden';
//p.style.textOverflow = 'ellipsis';
p.style.width = p.clientWidth + 'px';
span.textContent += list.length - (ix + 1);
span.textContent += 'more';
main.append(span);
return;
}
}
}
dotdotdot(stringArr);
main {
max-width: 300px;
height: 30px;
border: 1px solid #000000;
}
p {
display: inline-block;
width: fit-content;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<main>
<p></p>
</main>