Ant Design of Vue 描述列表 Descriptions a-descriptions-item 文本超出的问题

项目使用Ant Design of Vue 框架 有显示订单信息的功能,使用了Ant 的Descriptions 出现了以下问题 文档也没有给出解决方案
Ant Design of Vue 描述列表 Descriptions a-descriptions-item 文本超出的问题_第1张图片

	//修改前代码
    <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的父元素上试了下 ,神奇的一幕发生了 竟然渲染上了,特此记录一下
Ant Design of Vue 描述列表 Descriptions a-descriptions-item 文本超出的问题_第2张图片

	//最终
    <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>

总结 前端不好搞哦

你可能感兴趣的:(vue,vue)