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; +```