526互联

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

发布时间 2023-04-06 14:48:43作者: Felix_Openmind

参考：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">
        简要案情：张女士（身份证：360101199801011234）报案称，今年4月在酒吧认识一个叫张龙飞（的男性，随后张龙飞疯狂追求自己，不久与其成为男女朋友，之后张龙飞多次向自己借钱，张女士都转到支付宝账号，总额达到5万多，交往2个多月后，昨天对方把自己微信拉黑，张女士自觉受骗上当，随后报案。
      </p>
      <a-descriptions>
        <a-descriptions-item label="接警单编号">Zhou Maomao</a-descriptions-item>
        <a-descriptions-item label="报警手机号码">1810000000</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="张女士身份证360101199801011234报案称今年4月在酒吧认识一个叫张龙飞">
            张女士（身份证：360101199801011234）报案称，今年4月在酒吧认识一个叫张龙飞张女士（身份证：360101199801011234）报案称，今年4月在酒吧认识一个叫张龙飞张女士（身份证：360101199801011234）报案称，今年4月在酒吧认识一个叫张龙飞张女士（身份证：360101199801011234）报案称，今年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;
  }