technology-note/前端/react/其他/1.antd table 设置单元格单行显示.md
2019-06-27 17:48:21 +08:00

25 lines
599 B
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
id: "20190621"
date: 2019/06/21 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;
```