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>
复制代码

首先将checkbox隐藏起来：

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

然后自定义label样式，接着设置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;
复制代码

这3个CSS语句的意思是：

• 设置如果文字长度超出指定的宽度，则隐藏超出宽度的内容。
• 设置文字在一行显示，不能换行。
• 设置文本溢出时，用省略符号来代表被裁剪的文本。

那么处理多行文本又是怎么样的？这里提供一个CSS版本：

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

上面CSS语句的意思是：

• 设置元素为弹性伸缩盒子模型。
• 设置显示文本的行数。
• 设置伸缩盒子元素的子元素排列方式（以上三个要一起使用）
• 设置文本溢出时，用省略符号来代表被裁剪的文本。

效果如下：

但这种方法缺点也很明显，只适用在WebKit内核的浏览器。