文本截断
单行文本截断
单行文本的截断需要用到的主要的一个属性是：text-overflow
text-overflow: clip | ellipsis | string
// clip 剪切文本
// ellipsis 显示省略符号...来代替剪切掉的文本
// string 使用指定的字符串来代替剪切掉的文本
// inital 设置为默认属性值
// inherit 从父元素继承到该属性值
单行文本截断代码
.word_cut {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
- white-space: nowrap; 文本不换行
- text-overflow: ellipsis; 文本溢出时显示省略号标记...
多行文本截断
.words_cut {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
- display: -webkit-box，表示将父级元素变为弹性盒模型
- -webkit-box-orient 属性，设置子元素的排列方式，horizontal（默认值，水平排列），vertical（垂直排列）
- -webkit-line-clamp 属性，控制文本显示的行数
苹果手机默认样式处理
苹果手机部分样式带有自定义样式，需要重置后再设置样式才会生效。
input[type=button],
input[type=submit],
input[type=reset],
input[type=file],
button {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
注意：如果没有重置直接设置可能无法生效。
去除 Chrome 等浏览器文本框默认发光边框
input:focus,
textarea:focus {
outline: none;
}
去掉高光样式
input:focus {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify: read-write-plaintext-only;
}
毛玻璃效果（backdrop-filter）
高斯模糊是一种常见的效果（俗称毛玻璃效果），在 CSS 中使用 filter、backdrop 属性均可实现。
filter （兼容性：除 IE 外的其他最新版本浏览器）
这其实是一种“假”模糊，需要一层做背景并使用 filter 属性达到模糊效果，另一层（在背景层之上）设置一个半透明的背景色。
.bg {
-webkit-filter: blur(10px);
filter: blur(10px);
}
backdrop-filter （兼容性：只有苹果 safari 和 google 浏览器）
这个属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
苹果官网导航案例
@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
#ac-gn-segmentbar {
background: rgba(0,0,0,0.8);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
@supports 检测浏览器是否支持某些属性
@supports 是 CSS3 新引入的规则之一，主要用于检测当前浏览器是否支持某个 CSS 属性并加载具体样式
table 的重要属性
设置表格的布局算法
默认值为 auto
| 值 | 描述 |
|---|---|
| automatic | 默认。列宽度由单元格内容设定。 |
| fixed | 列宽由表格宽度和列宽度设定。 |
| inherit | 规定应该从父元素继承 table-layout 属性的值。 |
table {
table-layout: fixed;
}
关键字
initial（默认值）
- initial 关键字用于设置 CSS 属性为它的默认值。
- initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。
inherit（继承）
- inherit 关键字指定一个属性应从父元素继承它的值。
- inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。
