25 lines
599 B
Markdown
25 lines
599 B
Markdown
|
---
|
|||
|
|
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;
|
|||
|
|
```
|