diff --git a/src/pages/demo/components/container/components/d2-demo-article.vue b/src/pages/demo/components/container/components/d2-demo-article.vue
index ab96b27d..1d77d8fc 100644
--- a/src/pages/demo/components/container/components/d2-demo-article.vue
+++ b/src/pages/demo/components/container/components/d2-demo-article.vue
@@ -1,16 +1,38 @@
 <template>
   <div>
-    <d2-markdown :source="long"/>
+    <div class="d2-demo-article-control">
+      <el-switch
+        v-model="isLong"
+        active-text="长内容"
+        inactive-text="短内容">
+      </el-switch>
+    </div>
+    <d2-markdown v-show="isLong" :source="long"/>
+    <d2-markdown v-show="!isLong" :source="short"/>
   </div>
 </template>
 
 <script>
-import long from '../md/long'
+import long from '../md/long.md'
+import short from '../md/short.md'
 export default {
   data () {
     return {
-      long
+      long,
+      short,
+      isLong: false
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.d2-demo-article-control {
+  padding: 8px 16px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  background-color: #f4f4f5;
+}
+</style>
+
diff --git a/src/pages/demo/components/container/ghost-bs.vue b/src/pages/demo/components/container/ghost-bs.vue
index 3ca9a643..51af6f7a 100644
--- a/src/pages/demo/components/container/ghost-bs.vue
+++ b/src/pages/demo/components/container/ghost-bs.vue
@@ -2,7 +2,9 @@
   <d2-container type="ghost" scroll>
     <template slot="header">header</template>
     <div class="d2-pt d2-pb">
-      <d2-demo-article/>
+      <el-card shadow="never">
+        <d2-demo-article/>
+      </el-card>
     </div>
     <template slot="footer">footer</template>
   </d2-container>
diff --git a/src/pages/demo/components/container/ghost-slot.vue b/src/pages/demo/components/container/ghost-slot.vue
index 50615cee..34c35de5 100644
--- a/src/pages/demo/components/container/ghost-slot.vue
+++ b/src/pages/demo/components/container/ghost-slot.vue
@@ -2,7 +2,9 @@
   <d2-container type="ghost">
     <template slot="header">header</template>
     <div class="d2-pt d2-pb">
-      <d2-demo-article/>
+      <el-card shadow="never">
+        <d2-demo-article/>
+      </el-card>
     </div>
     <template slot="footer">footer</template>
   </d2-container>
diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue
index a5bdac92..4350b187 100644
--- a/src/pages/demo/components/container/ghost.vue
+++ b/src/pages/demo/components/container/ghost.vue
@@ -1,7 +1,9 @@
 <template>
   <d2-container type="ghost">
     <div class="d2-pt d2-pb">
-      <d2-demo-article/>
+      <el-card shadow="never">
+        <d2-demo-article/>
+      </el-card>
     </div>
   </d2-container>
 </template>
diff --git a/src/pages/demo/components/container/md/long.md b/src/pages/demo/components/container/md/long.md
index 5436fc3a..59d2f891 100644
--- a/src/pages/demo/components/container/md/long.md
+++ b/src/pages/demo/components/container/md/long.md
@@ -1,5 +1,3 @@
-下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
-
 ## vue.js
 
 **易用**
diff --git a/src/pages/demo/components/container/md/short.md b/src/pages/demo/components/container/md/short.md
new file mode 100644
index 00000000..06496563
--- /dev/null
+++ b/src/pages/demo/components/container/md/short.md
@@ -0,0 +1,17 @@
+## vue.js
+
+**易用**
+
+已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
+
+**灵活**
+
+不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
+
+**高效**
+
+20kB min+gzip 运行大小
+
+超快虚拟 DOM
+
+最省心的优化
\ No newline at end of file