在带有换行文本的工具提示中显示溢出文本

Question

我需要工具提示出现在具有固定最大宽度的块中。当块内的文本太长时，它应该截断文本并在最后显示三个点，您可以将鼠标悬停在它上面以查看工具提示中的所有文本。

这是我尝试执行此操作的代码：

.new{ 
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); 
    left:25px;
        margin-top: -24px;
    opacity: 0; 
    padding: 3px 7px;
    position: absolute;
    visibility: hidden;
        width: 300px;
        display: block;             
    transition: all 0.4s ease-in-out; 
}
        
.tooltip:hover::after {
    opacity: 1; 
    visibility: visible;
}

<div class="new">
  <span class="tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit lorem, elementum ut euismod sed, lacinia et dui. Morbi accumsan metus eget elit porttitor condimentum. Sed quis consectetur eros, eu luctus velit. Proin semper tortor vel risus scelerisque, nec elementum nisl imperdiet. Proin sit amet erat pulvinar, viverra nulla eu, molestie lorem. Nam sit amet neque commodo odio fringilla tempor accumsan id tellus. In hendrerit nisi ipsum.">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit lorem, elementum ut euismod sed, lacinia et dui. Morbi accumsan metus eget elit porttitor condimentum. Sed quis consectetur eros, eu luctus velit. Proin semper tortor vel risus scelerisque, nec elementum nisl imperdiet. Proin sit amet erat pulvinar, viverra nulla eu, molestie lorem. Nam sit amet neque commodo odio fringilla tempor accumsan id tellus. In hendrerit nisi ipsum.
</span>
</div>

在我的代码中，

overflow

可以正常工作并截断文本，但工具提示也显示在一行中。 如果我关闭

div

中的溢出，工具提示会完美显示，但

span

溢出不起作用。

Answer 1

发生这种情况是因为工具提示继承了所有父样式。

尝试覆盖父样式以获得所需的结果，例如将

white-space

属性设置为

normal

for

.tooltip::after

.

这是一个工作示例的小提琴，只添加一行：

.new {
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip);
    left: 25px;
    margin-top: -24px;
    opacity: 0;
    padding: 3px 7px;
    position: absolute;
    visibility: hidden;
    width: 300px;
    display: block;
    transition: all 0.4s ease-in-out;
    /** added line **/
    white-space: normal; /* <---- here */
}
        
.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

<div class="new">
  <span class="tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit lorem, elementum ut euismod sed, lacinia et dui. Morbi accumsan metus eget elit porttitor condimentum. Sed quis consectetur eros, eu luctus velit. Proin semper tortor vel risus scelerisque, nec elementum nisl imperdiet. Proin sit amet erat pulvinar, viverra nulla eu, molestie lorem. Nam sit amet neque commodo odio fringilla tempor accumsan id tellus. In hendrerit nisi ipsum.">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit lorem, elementum ut euismod sed, lacinia et dui. Morbi accumsan metus eget elit porttitor condimentum. Sed quis consectetur eros, eu luctus velit. Proin semper tortor vel risus scelerisque, nec elementum nisl imperdiet. Proin sit amet erat pulvinar, viverra nulla eu, molestie lorem. Nam sit amet neque commodo odio fringilla tempor accumsan id tellus. In hendrerit nisi ipsum.
</span>
</div>