js+css实现超过两行省略且尾部添加图标

超过两行省略且尾部添加图标:

js判断是一行还是两行:


const { postData } = props;

useEffect(() => {
  const titleDoms = Array.from(document.querySelectorAll('.search-result-title') || [])
  titleDoms.forEach(item => {
    const style = window.getComputedStyle(item);
    const height = parseInt(style.height);
    const lineHeight = parseInt(style.lineHeight);

    if (height / lineHeight > 1) {
      item.classList.add(styles['line2'])
    } else {
      item.classList.add(styles['line1'])
    }
  })
},[postData])

 Html结构:

  <div className={styles['content-wrapper']}>
                <div  className='search-result-title'>
                  {item.isNews ? <img className={styles['icon-1']} src={message} /> : null}
                  <span className={styles['title']} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.title) }}></span>
                  {item.isNews ? <img className={styles['icon-2']} src={message} /> : null}
                </div>
              </div>

css样式:

 
     .content-wrapper {
            max-width: 100%;
            position: relative;
            .hupu-font-title2;
            .word('PingFangSC-Regular, PingFang SC',400);
            margin-bottom: 8px;
            .more-n-hidden(2);
            word-break: break-all;
        }
 
        /*撑开高度,确保icon-1位于文本右下方,文本超出时*/ 
        .line2::before {
            content: '';
            display: block;
            float: right;
            width: 0;
            height:26px;
        }
        .line1::before {
            content: '';
            display: block;
            float: right;
            width: 0px;
            height:0;
        }

        /*用于文本未超出时遮挡icon-1,文本未超出时*/
        .line1::after,.line2::after {
            position: absolute;
            content: '';
            display: inline-block;
            width: 100%;
            height: 100%;
            background: var(--bg);
         }

        /*文本超出后显示的图标*/
        .icon-1 {
            height: 16px;
            width: 26px;
            margin-left: 3px;// 解决省略号和资讯重叠
            float: right;
            clear: both;
            display: block;
        }

        /*文本未超出时显示的图标*/
        .icon-2 {
            height: 16px;
            width: 26px;
            margin-left: 3px;// 解决省略号和资讯重叠
            vertical-align: baseline;
        }

   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值