悬停弹出重叠表字段与大文本反应

Posted 2023-03-06

【中文标题】悬停弹出重叠表字段与大文本反应

【英文标题】：hover popup overlapping table fields with large text react

【发布时间】：2021-10-31 18:44:01

【问题描述】：

我正在开发一个反应应用程序，其中我有一个表格，我的一个列具有非常大的文本值，因此为了显示该值，我使用悬停弹出窗口来显示悬停在列值上的全文但是当我将鼠标悬停在它上面时，它会与其他列重叠，因为它以 1 条直线显示整个文本。

这是表格行和截断函数：

truncate = (str, n) => (str.length > n ? `$str.substr(0, n - 1)...` : str);

<Table.Cell data-title=message.job_data>
                    this.truncate(message.job_data,50)
                  </Table.Cell>

这是data-title的css：

 [data-title] 
      font-size: 14px;
      position: relative;
      cursor: help;
  
    
  [data-title]:hover::before 
      content: attr(data-title);
    opacity: 1;
      position: absolute;
    margin-top:33px;
      padding: 10px;
      background: #000;
      color: #fff;
      font-size: 14px;
    width:300px;
      white-space: wrap;
    z-index: 9;
  
  [data-title]:hover::after 
      content: '';
      position: absolute;
    opacity: 1;
      bottom: -12px;
      left: 8px;
      border: 8px solid transparent;    
      border-bottom: 8px solid #000;
  

我想以多行显示列文本，而不是一条与所有其他列重叠的直线。

附上我的错误截图：

正如您在消息列中看到的那样，文本很长，并且显示它与所有列水平重叠。

谢谢

【参考方案1】：

由于您尝试打​​破的文本中没有任何空格，我能想到的唯一方法是在 CSS 中这样做是 word-break: break-word;

[data-title]:hover::before 
    content: attr(data-title);
    opacity: 1;
    position: absolute;
    margin-top:33px;
    padding: 10px;
    background: #000;
    color: #fff;
    font-size: 14px;
    width:300px;
    word-break: break-word;
    z-index:9;
  

【讨论】：

太棒了:)

谢谢，它有帮助。你能删除图像吗？数据有点机密

请注意，您还需要从上传图像的 imgur 中删除图像，否则机密数据将永远可以从此问题的编辑历史中访问。也许版主可以提供帮助...