CSS实现：计算选定的标签元素，多个文本溢出并删除

选定标签元素的CSS计算

这是社交平台中的常见需求。例如，在掘金平台，用户可以选择感兴趣的品牌。 JS 通常用于操作所选符号的数量。今天我给出css版本：

<p>请选择你感兴趣的标签:</p>
<input type="checkbox" id="topic1"><label for="topic1" class="topic">Vue</label>
...
<p>您已选择<span class="topic-counter"></span>个标签。</p>
复制代码

先隐藏盒子：

[type="checkbox"]{
    position: absolute;
    clip: rect(0 0 0 0);
}
复制代码

然后编辑❀然后设置CSS 计算。

// 在body中创建或者重置计算器
body {
    counter-reset: topicCounter;
}
// 当checkbox在选中状态时递增变量
:checked + .topic {
    counter-increment: topicCounter;
}
//使用counter（）函数将计算器的值添加到元素中。
.topic-counter::before {
    color: red;
    content: counter(topicCounter);
}
复制代码

翻译如下：

增加和离开多行

增加和离开是正常业务中需要的，但大多数是指单行文本：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
复制代码

3CSSThe该语句的含义是：

• 设置如果文本长度超过指定宽度，则隐藏超过宽度的内容。
• 将文本放在一行上且不能换行。
• 插入多余文本时，使用省略号来显示被截断的文本。

那么处理多个帖子怎么样？这是CSS的一个版本：

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
复制代码

上面的CSS的意思是：

• 将扩展盒放在松紧带上。
• 设置要显示的文本行数。
• 设置可伸缩盒子元素的小元素的布局（以上三个必须组合）
• 设置文本换行时，使用省略号来显示被截断的文本。

结果如下：

但是，这种方法的缺陷也很明显。仅适用于具有 WebKit 内核 的浏览器。

作者：zhangwinwin
链接：https://juejin.cn/post/6934887428616355847
来源：掘金
版权归作者所有。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。