资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/判断文本是否溢出/hover显示全部

判断文本是否溢出/hover显示全部

番茄西红柿 / 2784人阅读

摘要：前言在工作中我们经常会遇到，文字过多，需要用省略号，并且鼠标的时候还需要显示全部的文字的需求。还记得的作用不就是第二步中确定是否溢出用的。方法二在标签内部再包裹一个标签，标签在时显示。

前言

在工作中我们经常会遇到，文字过多，需要用省略号，并且鼠标hover的时候 还需要 显示全部的文字的需求。

正文

  1. 文字过多需要用省略号的实现：上代码啦 
    .ellipsis {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
     display: inline-block //块级标签不需要
}

     

  2.  如何得知这个是否溢出呢？关键词：clientWidth 和scrollWidth: 代码奉上：

    // 我是在react中实现

 componentDidMount () { // 在did mount 中判断是否溢出
    const node = this.ref.current  // 判断的dom节点，使用ref
    const clientWidth = node.clientWidth
    const scrollWidth = node.scrollWidth
    if (clientWidth < scrollWidth) {
      this.setState({    // 把是否溢出的状态存在state中，之后从state中拿值使用
        overflow: true    
      })
    }
  }  // 在普通js中实现，方法一样，取到dom，判断clientWidth 和scrollWidth
  3. 判断完溢出，一般会需要处理，我这里的需求是hover时候再显示全部。方法两种，第一，使用伪类，第二，包裹一个标签，该标签hover时候显示。

 　　　　重点坑： 有省略号的标签，我们使用了overflow:hidden来实现了，那么这个就是一个BFC，hover时候显示的提示框，超出bfc的就显示不了了。。。

　　　　方法一 ： 伪类实现：代码上html

<span className={`${styles.detail} ${styles.ellipsis}`} ref={this.departmentRef} data-customer={overflow ? department : null}>{department}span>

// 关注data-customer 属性，这个属性在有溢出时候赋值，无溢出时候为null。  还记得ref的作用不？就是第二步中确定是否溢出用的。
.ellipsis { // 第一步溢出的代码
          display: inline-block;  
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 255px;
}
.ellipsis[data-customer]:hover::after { // 关键代码，伪类实现
          content: attr(data-customer);
          position: absolute;
          background: #F2F2F2;
          border: 1px solid #E5E5E5;
          box-shadow: 0 2px 4px 0 rgba(56,62,71,0.10);
          border-radius: 2px;
          padding: 2px 6px;
          font-size: 13px;
          color: #202332;
          top:106px; // 设置位置
          left: 10px; // 设置位置
          max-width: 90%;
          word-break: break-word; // 如果一个单词太长，则截断  CSS 属性 word-break 指定了怎样在单词内断行。
          white-space: normal;// 可以换行  white-space CSS 属性是用来设置如何处理元素中的空白。
}

 

    方法二：在hover标签A 内部再包裹一个标签B，B标签在hoverA时显示。代码走你

<span ref={this.ref} style={{display: inline-block}} className={overflow ? overFlowText : }>
{tableTitle}
{overflow ? (<span className=overflowSpan>{tableTitle}span>) : null}
span>
// 关键代码是那个三元~

 

.overflow{
   position: relative
}
.overflow .overflowSpan {
    display: none
}

.overflow:hover .overflowSpan{
   display: block;
   position: absolute;
   top: 10px;
   left: 0px;

}

参考链接： https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag

GPU云服务器 云服务器 溢出文本 php文本溢出省略 asp显示全部数据 判断是否

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1577.html

相关文章

  • text-overflow-文本溢出包含样式设置

    摘要：需求该列展示文本的单元格宽度固定，文本超出部分显示为，当把鼠标移到文字上时，展示完整信息。效果没有获得焦点时获得焦点时另一种实现方案利用属性部分必须必须必须部分如果您把光标移动到下面上，就能够看到全部文本。 背景： 在列表中展示文本信息，但是有的文本信息过长，大部分则较短，若是不加控制，完全显示文本信息，列表会被撑开，很不美观。 需求： 该列展示文本的单元格宽度固定，文本超出部分显示为...

    Keven 评论0 收藏0

  • 解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

    摘要：一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。 一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。当然多行文本也同样适用，（若是全部是中文也可以使用判断判断字符串长度的方法，中文占用两个字符，...

    Channe 评论0 收藏0

  • 解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

    摘要：一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。 一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。当然多行文本也同样适用，（若是全部是中文也可以使用判断判断字符串长度的方法，中文占用两个字符，...

    rollback 评论0 收藏0

  • 解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

    摘要：一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。 一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。当然多行文本也同样适用，（若是全部是中文也可以使用判断判断字符串长度的方法，中文占用两个字符，...

    Luosunce 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<