0

我有一个这样的div：

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>

如您所见，我的 div 具有固定宽度，其余内容被隐藏。当我将光标悬停在它上面时，我想显示我的 div 的所有内容（像气泡或其他东西）。这对纯 HTML 是否可行，或者我别无选择，只能使用 JavaScript 来做到这一点？

4

3 回答 3

2

是的，如果您使用hover. 您必须将您的内联样式移动到一个类中。请参阅此处的示例：

http://jsfiddle.net/buC6t/

.exdiv {
    width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 
}
.exdiv:hover {
    overflow:visible;
}

<div class="exdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>
于 2013-06-26T21:15:26.313 回答
0

如果你想有气泡，没有js会重复内容，但可能：http: //jsfiddle.net/7e4hC/

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</span></div>

.test span {
    display: none;
}
.test:hover span {
    display: block;
    width: 500px;
    background-color: #ddd;
    overflow: visible;
    white-space: normal;
}

甚至更清洁：

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</div>

.test:hover {
    display: block;
    background-color: #ddd;
    overflow: visible;
    white-space: normal !important;
}
于 2013-06-26T21:20:18.597 回答
0

作为一种非常基本的非 CSS 非 JavaScript 方法，您可以使用工具提示：

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>

在此 div 上挥动鼠标将在工具提示中显示文本。您还可以保持初始title空白并在 JavaScript 中使用类似的内容填充它

myDivObj.title = myDivObj.innerHTML;
于 2013-06-26T21:18:41.220 回答