Ant Design of Vue 描述列表 Descriptions a-descriptions-item 文本超出的问题
项目使用Ant Design of Vue 框架 有显示订单信息的功能,使用了Ant 的Descriptions出现了以下问题 文档也没有给出解决方案//修改前代码<a-descriptions title="接口信息"><a-descriptions-item label="返回信息" :span="3">{{mdl.body}}</a-descriptions-i
·
项目使用Ant Design of Vue 框架 有显示订单信息的功能,使用了Ant 的Descriptions 出现了以下问题 文档也没有给出解决方案
//修改前代码
<a-descriptions title="接口信息">
<a-descriptions-item label="返回信息" :span="3">{{mdl.body}}</a-descriptions-item>
<a-descriptions-item label="备注信息" :span="3">{{mdl.remark}}</a-descriptions-item>
</a-descriptions>
以为加上这个css就可以了 style=“word-break: break-all;word-wrap: break-word;”
//修改后代码
<a-descriptions title="接口信息">
<a-descriptions-item label="返回信息" style="word-break: break-all;word-wrap: break-word;" :span="3">{{mdl.body}}</a-descriptions-item>
<a-descriptions-item label="备注信息" :span="3">{{mdl.remark}}</a-descriptions-item>
</a-descriptions>
但是毫无反应,头都大了,为什么不行 样式都加不上??前端也太难了吧
后来想了想就在item的父元素上试了下 ,神奇的一幕发生了 竟然渲染上了,特此记录一下
//最终
<a-descriptions title="接口信息" style="word-break: break-all;word-wrap: break-word;">
<a-descriptions-item label="返回信息" :span="3">{{mdl.body}}</a-descriptions-item>
<a-descriptions-item label="备注信息" :span="3">{{mdl.remark}}</a-descriptions-item>
</a-descriptions>
总结 前端不好搞哦
更多推荐
已为社区贡献1条内容
所有评论(0)