HTML Element Style How to - Hover to wrap

Question

We would like to know how to hover to wrap.

Answer


<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<body>
  <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
    end.</p>
  <div>Lorem ipsum dolor. Sit in your comfy office chair and OOH
    and AHH at the cool ellipsis!</div>
</body>
</html>

The code above is rendered as follows: