将一个技巧的长标签分成多行可以通过以下几种方式实现:
.long-label {
word-wrap: break-word;
}
.long-label {
white-space: pre-wrap;
}
.long-label {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
const label = document.querySelector('.long-label');
const maxWidth = 200; // 指定最大宽度
const words = label.textContent.split(' ');
let line = '';
let lines = [];
words.forEach(word => {
const testLine = line + word + ' ';
const testWidth = label.getBoundingClientRect().width;
if (testWidth > maxWidth && line !== '') {
lines.push(line);
line = word + ' ';
} else {
line = testLine;
}
});
lines.push(line);
label.textContent = lines.join('\n');
以上是将一个技巧的长标签分成多行的几种方法,具体使用哪种方法取决于实际需求和场景。
领取专属 10元无门槛券
手把手带您无忧上云