From 40104d978fd30d53a17da7c21d87f09ae66fad93 Mon Sep 17 00:00:00 2001
From: fanxb <fanxb.tl@gmail.com>
Date: Fri, 21 Jun 2019 13:48:55 +0800
Subject: [PATCH] add

---
 前端/react/1.antd table 设置单元格单行显示.md | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 前端/react/1.antd table 设置单元格单行显示.md

diff --git a/前端/react/1.antd table 设置单元格单行显示.md b/前端/react/1.antd table 设置单元格单行显示.md
new file mode 100644
index 0000000..d89c020
--- /dev/null
+++ b/前端/react/1.antd table 设置单元格单行显示.md	
@@ -0,0 +1,24 @@
+---
+id: "20190507"
+date: 2019/05/07 10:58:00
+title: "antd组件中table设置单行显示"
+tags: ["react", "antd", "table"]
+categories:
+  - "前端"
+  - "react"
+---
+
+今天在开发中遇到了这样一个问题，antd 的 table 组件，在内容太多时会折行显示，如何才能让它不折行并且用省略号显示超出内容呢？
+
+可以同给给单元格设置这样的 css 来达到效果：
+
+```css
+/* 设置最大宽度,不能用width */
+max-width: 133px;
+/* 不折行 */
+white-space: nowrap;
+/* 超出部分隐藏 */
+overflow: hidden;
+/* 显示... */
+text-overflow: ellipsis;
+```