посмотреть скрытый текст DIV при наведении курсора мыши

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 будет отображаться текст подсказка. Вы можете также держать Initally 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; 
}