CSS 杂项
本文记录 CSS 的一些小知识点，真的很零碎；
字符串溢出
常规需求，字符串溢出处理；可以用 JS 手动统计字数然后截取，也可以用 CSS 的方法；
单行
兼容性良好，简单，纯 CSS
1
2
3
4
5
.text-ellipsis-single {
overflow: hidden; /* 超出部分隐藏 */
white-space: nowrap; /* 单行显示 */
text-overflow: ellipsis; /* 文本超出部分；clip|ellipsis|string 截断|省略号|自定义字符串 */
}
多行
- 方案 1
这个方案兼容性不好，都是带浏览器前缀标识的，在 webkit 内核浏览器运行比较好；
1
2
3
4
5
6
7
.text-ellipsis-multiple {
-webkit-line-clamp: 2; /* webkit 内核浏览器支持的行数 */
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
- 方案 2
伪元素方案，借助元素的::before属性；关键点在于设置line-height; max-height可以控制元素的行高和最大高度，这样可以保证元素是在固定行数的，然后利用伪元素在末尾添加上想要的内容；遇到英文单词也可以优化下，用word-break: break-all;word-wrap:break-word;可以把英文单词截取掉；写成了less函数的形式，方便引入；
发现 bug，进行补充
发现如果行数不足 3 行时，也会在末尾出现省略号，所以想到利用after伪类；
- 如果不足 3 行，由于
before和after伪类处于相同的位置，所以after会把before的内容遮盖住； - 如果超过 3 行，
after的位置会被挤到第四行，而before的位置仍然会在第三行末尾，所以此时就会显示省略号；
.textOverflowMulti(@line: 3, @bg: #fff) {
overflow: hidden;
// display: inline-block;
position: relative;
line-height: 1.5em;
max-height: @line * 1.5em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
&::before {
background: @bg;
content: '...';
padding: 0 1px;
position: absolute;
right: 0px;
bottom: 0;
}
&::after {
background: white;
content: '';
margin-top: 0.2em;
position: absolute;
right: 0px;
width: 1em;
height: 1em;
}
}
CSS module
详见： CSS module
一直以来css都是作用在全局域的，在Vue中的解决方案是往style标签中添加scoped，最后编译渲染出来的样式都会带上data-v-xxx这样的前缀，就不会污染全局的样式表了；
而在react项目中，可以通过css-module的方式来实现，其实在create-react-app中都有配置，我们来细看一下；
在webpack-config.js中，module里的loader
子元素设置margin，影响到父元素的定位
“这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。”
解决方案：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 父组件 */
div {
overflow:hidden;
}
/* 或者 */
div {
border: 1px solid #000000;
}
/* 或者 */
div {
padding-top: 1px;
box-sizing: border-box;
/* 保持尺寸，因为如果指定height的话，padding-top会增加高度 */
}
![](./img/icon_wechat.png"){kind=icon}