2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > CSS--滚动条样式 鼠标点击小手 文字省略显示

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

时间:2019-06-27 09:36:55

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。