uniapp 文字超过出现滑动条

2401_84868241

于 2024-05-17 10:15:56 发布

阅读量187

点赞数 5

分类专栏： css uniapp 文章标签： uni-app java 前端

本文链接：https://blog.csdn.net/2401_84868241/article/details/138997866

版权

uniapp 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

1、html

		<view class="tes" style="margin-top: 15rpx;">
			<p v-html="conten" class="conten"></p>
		</view>

2、css


		.tes {
			height: 150rpx;
			width: 98%;
			padding-left: 55rpx;
			padding-right: 44rpx;
			margin: 0 auto;
			overflow: scroll;
			font-size: 30rpx;
			line-height: 45rpx;
			display: flex;
			/* overflow:scroll; */
			overflow: auto;
			display: block;
			letter-spacing: 3rpx;
			box-sizing: border-box;
		}
    	.tes::-webkit-scrollbar-track-piece {
    		background-color: rgba(0, 0, 0, 0);
		    border-left: 1px solid rgba(0, 0, 0, 0);
	   }
    
    	.tes::-webkit-scrollbar {
	    	display: block;
		    width: 5px;
		    height: 10px;
		    -webkit-margin-bottom-collapse: 12px;
		    -webkit-border-radius: 5px;
		    -moz-border-radius: 5px;
		    border-radius: 5px;
	    }

	   .tes::-webkit-scrollbar-thumb {
		   background-color: #b2b2b2;
		   background-clip: padding-box;
		   -webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
		   border-radius: 5px;
		   min-height: 28px;
	   }

	  .tes::-webkit-scrollbar-thumb:hover {
		  background-color: #e6e6e6;
		  -webkit-border-radius: 5px;
		  -moz-border-radius: 5px;
		  border-radius: 5px;
	  }