CSS--滚动条样式，鼠标点击小手，文字省略显示

1.鼠标悬停（变小手）

/*鼠标悬停变小手（全局APP.vue）*/* {cursor: pointer;
}

2.滚动条样式（全局APP.vue）

::-webkit-scrollbar {width: 5px;height: 1px;
}
/* 滑块部分 */
::-webkit-scrollbar-thumb {border-radius: 5px;background-color: rgb(133, 130, 134);cursor: pointer;
}
/* 轨道部分 */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #ededed;border-radius: 5px;cursor: pointer;
}
/*滚动条超出部分隐藏 */
/* ::-webkit-scrollbar {display: none;
} */

3.局部滚动条样式

.div::-webkit-scrollbar {width: 5px;height: 1px;
}
/* 滑块部分 */
.div::-webkit-scrollbar-thumb {border-radius: 5px;background-color: rgb(133, 130, 134);cursor: pointer;
}
/* 轨道部分 */
.div::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #ededed;border-radius: 5px;cursor: pointer;
}
/*滚动条超出部分隐藏 */
/* .div::-webkit-scrollbar {display: none;
} */

4.文字超出省略，鼠标hover显示

   .title {width: 140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.title:hover {text-overflow: inherit;overflow: visible;white-space: nowrap;}/*超出两行省略*//*.title {overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;-ms-text-overflow: ellipsis;text-overflow: ellipsis;}*/

5.element的表格控制字数使用气泡

<el-table-column label="退回意见" prop="returnSuggestion" align="center" width="200"><template slot-scope="scope"><el-popoverv-if="scope.row.title && scope.row.title.length > 20 && scope.row.title != null"placement="top"width="300"trigger="hover":content="scope.row.title"><p slot="reference">{{scope.row.title.slice(0,20) + "..."}}</p></el-popover><p v-else>{{ scope.row.title }}</p></template></el-table-column>

CSS--滚动条样式，鼠标点击小手，文字省略显示相关推荐

CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击
鼠标经过变小手 div {cursor:pointer; // 直接给需要改变指针样式的对象添加该属性,不要被误导为 :hover 伪类 } cursor属性及属性值介绍 <!DOCTYPE h ...
CSS 让鼠标呈现手型,鼠标悬浮变小手
CSS 让鼠标呈现手型,鼠标悬浮变小手添加样式 cursor:pointer 就行了
1-Vue中鼠标悬停变小手
1.页面 <el-col :span="16"><div class="information-title">这是文字,鼠标可以悬停的文 ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...
Echarts图表--＞鼠标移入取消小手
当图表中没有可点击跳转的需求时,则鼠标移入当前图表时,小手状态变为箭头 // myChart是绘图的对象myChart.getZr().on('mousemove', param => {myC ...
前端：a 鼠标悬浮变小手
作为一个java编程的小白,java还没学太明白,应工作要求,也要开始学习前端知识了,在此记录学到的知识点. 为<a>加样式,是鼠标悬浮变小手: cursor:pointer; 变小手 ...
当鼠标放在图片或文字上，如何让鼠标箭头变成小手
此处应通过css来实现:以<img>为例 <image id='" + quesNum + "' style='width:10px;height:10px;ma ...
html中美化右侧滑动条,美化css滚动条样式，就这么简单
很多朋友,会觉得默认的css滚动条样式是很丑的吧,稍微改下-webkit-scrollbar(滚动条整体样式).-webkit-scrollbar-thumb(滚动条里面小方块样式).-webkit- ...
滚动条样式-鼠标悬浮才展示滚动条
滚动条样式-鼠标悬浮才展示滚动条 /* 滚动条 */ .overflow-scroll {overflow: overlay;&::-webkit-scrollbar {width: 0;he ...

CSS--滚动条样式，鼠标点击小手，文字省略显示

CSS--滚动条样式，鼠标点击小手，文字省略显示相关推荐

最新文章

热门文章