Автоматически добавлять "...", если текст расширяет определенную ширину, но показывать его при наведении?

Я пытаюсь сделать следующее, имея <div> определенной ширины, скажем 30% и более 1 строки текста в нем, однако я хочу показать ..., если текст длинный, также ширина <div> будет меняться, так как это отзывчивый дизайн, поэтому ... следует соответствующим образом отрегулировать. Но если человек нависает над этим <div>, он должен расширять его ширину (он будет абсолютно позиционирован, так что выход из определенных границ разрешен.) И показать весь текст в той же строке.

Пример:

This is text that fits

This is text that doesn't fit inside ...

This is text that doesn't fit inside, but is visible on hover.

Не уверен, что это можно сделать с помощью чистых HTML и CSS и работать с перекрестным браузером, возможно, с переполнением скрытой резервной копии? или JQuery, если это не может быть достигнуто ни с чем другим.

Ответы

#test {
    width: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#test:hover {
    overflow: visible;
}

<p>This is text that doesn't fit inside, but is visible on hover.</p>


p {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
p:hover {
    max-width: none;
}