HTML Element Style How to - Hover to wrap


We would like to know how to hover to wrap.


<!DOCTYPE html>
<style type='text/css'>
div {<!--from  w w w  .  jav  a  2  s  . c  om-->
  width: 50%;
  border: 1px solid #000;
  padding: 8px;
  margin: 48px auto 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* This is where the magic happens! */

div:hover {
  white-space: normal;
  <p>Resize your browser window to see what happens to the text in
    the box below. When the text is too long, an ellipses is added to the
  <div>Lorem ipsum dolor. Sit in your comfy office chair and OOH
    and AHH at the cool ellipsis!</div>

The code above is rendered as follows: