HTML5: Your visual blueprint™ for designing rich web pages and applications

FORMAT TEXT OVERFLOW INSIDE AN ELEMENT

You can format any element’s text, such as an <h1> heading, a <p> paragraph, or a <figcaption> caption, to alter how it is rendered by the browser. This goes beyond simply modifying the font; you can change text overflow and line-wrapping characteristics and even draw an outline and shadow under the text:

selector {
  text-overflow: clip|ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

This hides any text that would otherwise wrap in a width-restricted element. The clip option simply cuts off the text, and ellipsis displays three periods, or just before the text is cut off. You can make the hidden text visible again by using the :hover pseudo-class on the original selector:

 selector:hover { text-overflow: ...