From 1f9e071b08b16149346d361f303d5fb5bbc2837a Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Thu, 10 Aug 2023 12:38:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0CSS=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                        | 16 +++++++++++--
 pages/CSS/layout/visibility.uvue  | 37 +++++++++++++++++++++++++++++++
 pages/CSS/text/text-overflow.uvue | 26 ++++++++++++++++++++++
 pages/tabBar/CSS.uvue             |  8 +++++++
 4 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 pages/CSS/layout/visibility.uvue
 create mode 100644 pages/CSS/text/text-overflow.uvue

diff --git a/pages.json b/pages.json
index 99b473a8..f77f0381 100644
--- a/pages.json
+++ b/pages.json
@@ -401,7 +401,13 @@
       "style": {
         "navigationBarTitleText": "width"
       }
-    },
+    },
+	{
+	  "path": "pages/CSS/layout/visibility",
+	  "style": {
+	    "navigationBarTitleText": "visibility"
+	  }
+	},
     {
       "path": "pages/CSS/margin/margin-bottom",
       "style": {
@@ -503,7 +509,13 @@
       "style": {
         "navigationBarTitleText": "text-align"
       }
-    },
+    },
+	{
+	  "path": "pages/CSS/text/text-overflow",
+	  "style": {
+	    "navigationBarTitleText": "text-overflow"
+	  }
+	},
     {
       "path": "pages/CSS/text/text-decoration-line",
       "style": {
diff --git a/pages/CSS/layout/visibility.uvue b/pages/CSS/layout/visibility.uvue
new file mode 100644
index 00000000..7940abda
--- /dev/null
+++ b/pages/CSS/layout/visibility.uvue
@@ -0,0 +1,37 @@
+<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
diff --git a/pages/CSS/text/text-overflow.uvue b/pages/CSS/text/text-overflow.uvue
new file mode 100644
index 00000000..d944a887
--- /dev/null
+++ b/pages/CSS/text/text-overflow.uvue
@@ -0,0 +1,26 @@
+<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
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index ded37822..543ee7f8 100644
--- a/pages/tabBar/CSS.uvue
+++ b/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'
-- 
GitLab