Question

我有这样的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执行此操作之外别无选择吗？

Answer 1

是的，如果您使用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>

Answer 2

作为一种非常基本的非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;

Answer 3

如果你想要泡泡，没有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;
}

在悬停时查看隐藏的div文本

3 个答案: