AntDesign 描述列表descriptions中内容超出部分隐藏,同时鼠标浮动显示全部

参考:https://blog.csdn.net/sdibtjf1702/article/details/121923943

效果

核心代码

<a-card title="案情简要">
<p style="font-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500">
简要案情:张女士(身份证:364)报案称,今年4月在酒吧认识一个叫张龙飞(的男性,随后张龙飞疯狂追求自己,不久与其成为男女朋友,之后张龙飞多次向自己借钱,张女士都转到支付宝账号,总额达到5万多,交往2个多月后,昨天对方把自己微信拉黑,张女士自觉受骗上当,随后报案。
</p>
<a-descriptions>
<a-descriptions-item label="接警单编号">Zhou Maomao</a-descriptions-item>
<a-descriptions-item label="报警手机号码">100</a-descriptions-item>
<a-descriptions-item label="报警时间">2020.01.01 12:32:34</a-descriptions-item>
<a-descriptions-item label="警情类别">治安</a-descriptions-item>
<a-descriptions-item label="报警内容">
// 核心内容🟨🍅🥩
<div title="张女士身份证36014报案称今年4月在酒吧认识一个叫张龙飞">
张女士(身份证:36014)报案称,今年4月在酒吧认识一个叫张龙飞张女士(身份证:3604)报案称,今年4月在酒吧认识一个叫张龙飞张女士(身份证:361234)报案称,今年4月在酒吧认识一个叫张龙飞张女士(身份证:3634)报案称,今年4月在酒吧认识一个叫张龙飞
</div>
</a-descriptions-item>
<a-descriptions-item label="警情位置">镇江市润州区龙华街道400</a-descriptions-item>
</a-descriptions>
</a-card>

核心样式代码

:deep(.ant-descriptions-item-content) {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
posted @   Felix_Openmind  阅读(2050)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}
点击右上角即可分享
微信分享提示