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

最新推荐文章于 2025-03-31 08:00:00 发布

代码不是马

最新推荐文章于 2025-03-31 08:00:00 发布

阅读量1.5w

点赞数 6

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/lyp1245387976/article/details/107319993

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

项目使用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>

总结前端不好搞哦