css限制指定数量字符

admin

撰写于 2023年 05月 05 日

CSS本身没有限制指定数量字符的属性，但可配合JavaScript实现。

以下是一个使用CSS和JavaScript来限制指定数量字符的示例：

<p class="limit-text" data-limit="50">这里是需要限制字符长度的文本</p>

.limit-text {
  white-space: nowrap;
  overflow: hidden;
}

.limit-text::after{
    content: "..."; /* 添加省略号 */
}

// 获取所有需要限制字符长度的元素
const limitTexts = document.querySelectorAll('.limit-text');

// 遍历每个需要限制字符长度的元素
limitTexts.forEach(function(el) {
    const limit = el.getAttribute('data-limit'); // 从元素 data-limit 属性获取字符长度限制
    const text = el.textContent; // 获取元素的文本内容

    // 如果文本内容超过了限制
    if (text.length > limit) {
        el.textContent = text.substr(0, limit); // 截取前 n 个字符
        el.classList.add('has-ellipsis'); // 添加 ellipsis 样式类名
    }
});

以上代码中，首先我们定义了一个类名为 .limit-text 的元素，该元素将在 CSS 样式中设置 white-space: nowrap 和 overflow: hidden 属性，以防止文本换行和溢出。同时，在 ::after 伪元素中添加省略号来表示被截断的文本部分。

然后，使用 JavaScript 代码来获取所有含有 .limit-text 类名的元素，并遍历每个元素，从 data-limit 属性获取文字最大长度 limit，并获取元素的文本 text，如果文本超过指定的长度限制，则进行字符串截取，并在元素中添加 has-ellipsis 样式类名，使得省略号可见。

最后，可以使用其他的 CSS 样式来对 .has-ellipsis 类名进行定制化样式。