文字
语法 | 说明 | |
word-wrap | word-wrap:normal| break-word | normal:使用浏览器默认的换行 break-word:允许在单词内换行 |
text-overflow | clip:修剪文本 ellipsis:显示省略符号来代表被修剪的文本 | |
text-shadow | 可向文本应用的阴影。能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色 | |
text-decoration | text-fill-color:设置文字内部填充颜色 text-stroke-color:设置文字边界填充颜色 text-stroke-width:设置文字边界宽度 | |
writing-mode | vertical-rl | 表示文字从上到下竖直排列,从右到左书写 |
text-orientation | upright | 确保文字保持正立显示 |
white-space | nowrap | 避免文字自动换行,保持竖直排列效果 |
文本溢出
单行文本溢出
//单行文本溢出
overflow:hidden; //溢出隐藏
text-overflow:ellipsis; // 溢出用省略号显示
white-space:nowrap; //不进行换行
多行文本溢出
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; // 显示的行数
滚动条
.con-content::-webkit-scrollbar {
width: 3px;
}
.con-content::-webkit-scrollbar-thumb {
background-color: #85ace9;
}
.con-content::-webkit-scrollbar-track {
background-color: #020927;
}