add
This commit is contained in:
parent
ccd7e3beac
commit
40104d978f
24
前端/react/1.antd table 设置单元格单行显示.md
Normal file
24
前端/react/1.antd table 设置单元格单行显示.md
Normal file
@ -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;
|
||||||
|
```
|
Loading…
x
Reference in New Issue
Block a user