Antd Descriptions组件的样式修改

如下图，在工作中我们经常会用到这种布局来展示一些信息，当然做法有很多，图方便，我直接把antd Descriptions组件拿过来用。

然后在用的过程中，发现了一些“问题”，这些对我的需求来说是“问题”，但是对antd来说，这是他的设计理念，如下图，我们可以看到，当内容过多的时候，他其实并不会去做截断，而是让内容自动填充下去，在github上我也看到有人提了这个issues，但是官方的大致意思就是这个组件就是这么去设计的，其实想想也没什么问题。

这么做虽然没什么问题，但是感觉好丑啊，所以我需要做“内容过多就自动截断，并且显示tips”，这时候方案有2种办法。

1. 自己写布局，不用他的组件。
2. 带着探究到底的精神，去修改他的css代码。

那还用说，直接修改他的css！

刚开始我尝试在Descriptions.Item里面各种套div flex给上自适应宽度，发现各种不行，然后我才发现他的ant-descriptions-item-content里有一个display: inline-flex属性。

display: inline-flex： 父元素会根据子元素去排列，也就是说，子元素多宽，那么父元素就是多宽，实现溢出省略号的效果，必须是有个具体的宽度值，当然也可以用计算值。他这里用了这个属性。那么父元素永远和子元素宽度一致，就没法做到省略号了，所以我们给他改成block。

在需要去自动进行截断的Descriptions中添加“auto-ellipsis”类名

最后的效果如下：

然后我又用Desctiptions组件做了个类似于Table的页面。。果然又满足不了我的需求。。

先来看代码，我们在加上bordered后会展示边框，加上column会将一行分成你指定的列数。

页面的样式如下。

1. 在没有数据的情况下，他的宽度竟然不是平分的。

2. 在有数据的情况下，直接占据另一栏的宽度。

经过一番研究后，找到了原因。他的table-layout为 auto，还是一样的设计理念，自适应，不去限制宽度，我们修改如下即可。

最后效果如下，当内容过多自己往下撑，并且不影响另一栏的宽度，完美～

关于table-layout属性我倒是很少见到，看了下文档大概如下：

1. table-layout属性为设置表格布局算法。
2. auto默认值：列宽度由单元格内容设定。
3. fixed：列宽由表格宽度和列宽度设定。

找到一篇关于table-layout属性的文章，讲的不错，地址：table-layout属性fixed和auto的区别

我的微信公众号： 梨的前端小屋