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; }
学而不思则罔,思而不学则殆!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效