我需要工具提示出现在一个固定的最大宽度块.当块中的文本太长时，它应该截断文本并在末尾显示三个点，您可以将鼠标悬停在它上面以查看工具提示中的所有文本.
以下是我try 执行此操作的代码:
.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溢出不起作用.