更新CSS示例

pages.json

@@ -402,6 +402,12 @@
         "navigationBarTitleText": "width"
       }
     },
+	{
+	  "path": "pages/CSS/layout/visibility",
+	  "style": {
+	    "navigationBarTitleText": "visibility"
+	  }
+	},
     {
       "path": "pages/CSS/margin/margin-bottom",
       "style": {
@@ -504,6 +510,12 @@
         "navigationBarTitleText": "text-align"
       }
     },
+	{
+	  "path": "pages/CSS/text/text-overflow",
+	  "style": {
+	    "navigationBarTitleText": "text-overflow"
+	  }
+	},
     {
       "path": "pages/CSS/text/text-decoration-line",
       "style": {

pages/CSS/layout/visibility.uvue

+<template>
+	<view style="flex-grow: 1;">
+		<view @click="changeVisibility">
+			<text>visibility: {{visibility}}（点击切换）</text>
+			<view class="common" :style="{'visibility': visibility}"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				visibility: 'visible',
+				flag: true
+			}
+		},
+		methods: {
+			changeVisibility() {
+				this.flag = !this.flag;
+				if (this.flag) {
+					this.visibility = 'visible';
+				} else {
+					this.visibility = 'hidden';
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 500rpx;
+		background-color: red;
+	}
+</style>
\ No newline at end of file

pages/CSS/text/text-overflow.uvue

+<template>
+	<view style="flex-grow: 1;">
+		<view style="height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
+			<text class="common" style="text-overflow: clip;">{{text}}</text>
+			<text class="common" style="text-overflow: ellipsis;">{{text}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				text: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言'
+			}
+		}
+	}
+</script>
+
+<style>
+	.common {
+		width: 500rpx;
+		height: 60rpx;
+		font-size: 20px;
+	}
+</style>
\ No newline at end of file

pages/tabBar/CSS.uvue

@@ -167,6 +167,10 @@
 						{
 							name: 'width',
 							url: '/pages/CSS/layout/width'
+						},
+						{
+							name: 'visibility',
+							url: '/pages/CSS/layout/visibility'
 						}
 					] as Page[]
 				}, {
@@ -252,6 +256,10 @@
 							name: 'text-align',
 							url: '/pages/CSS/text/text-align'
 						},
+						{
+							name: 'text-overflow',
+							url: '/pages/CSS/text/text-overflow'
+						},
 						{
 							name: 'text-decoration-line',
 							url: '/pages/CSS/text/text-decoration-line'