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

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 中的 overflow，则工具提示会完美地显示，但是 span 的 overflow 就无法正常工作。

- Michel E

Answer 1

这是因为工具提示继承了所有父级样式。

尝试覆盖父级样式以获得所需的结果，例如将.tooltip::after的white-space属性设置为normal。

这里有一个带有工作示例的fiddle，只需添加一行：

.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>

- Cristóbal Díaz Álvarez