【一】tylus开发去除滚动条
代码:
去除滚动条:
.scroll
::-webkit-scrollbar
width 0
height 0
color transparent
【二】单行文本溢出显示省略号
overflow:hidden //设置元素的溢出内容将被隐藏。
text-overflow:ellipsis // 当文本溢出容器时,使用省略号来表示被截断的文本
white-space:nowrap // 防止文本换行,使文本在同一行上显示
【三】多行文本溢出显示省略号
// Webkit 引擎的浏览器中使用弹性盒子布局
display: -webkit-box; // 将元素显示为一个伸缩盒子容器
-webkit-box-orient: vertical; // 设置盒子的排列方向为垂直方向
-webkit-line-clamp: 2; // 控制文本最多显示两行
overflow: hidden;
text-overflow: ellipsis; // 控制文本溢出时显示省略号
// 针对 Uni小程序
// 1.
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 2; // 控制文本最多显示两行
text-overflow: ellipsis; // 控制文本溢出时显示省略号
// 2.
overflow: hidden
text-overflow: ellipsis; // 控制文本溢出时显示省略号
display: -webkit-box // 将元素显示为一个伸缩盒子容器
-webkit-line-clamp: 2 // 控制文本最多显示两行
line-clamp: 2 // 基于W3C标准的盒子布局模型,元素限制为最多两行文本
// 3.
overflow: hidden
text-overflow: ellipsis
display: -webkit-box
-webkit-line-clamp: 2 //行数需设置
line-clamp: 2
/* autoprefixer: ignore next */
-webkit-box-orient: vertical