From 40104d978fd30d53a17da7c21d87f09ae66fad93 Mon Sep 17 00:00:00 2001 From: fanxb 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; +```