CSS Word Wrapping and Text Overflow Propertys

Word Wrap ( word-wrap )

Available values of word-wrap property: normal, break-word, initial, inherit

Example : Disable HTML word wrapping using CSS

.your-class{white-space:nowrap;}

.your-class{white-space:nowrap;width: 150px; overflow: hidden;}

Overflow

Available values of overflow property: visible, hidden, scroll, auto, initial, inherit

Example : Overflow

.your-class {

    width: 300px;

    height: 300px;

    overflow: scroll;

}

Text Overflow (text-overflow)

Available values of text-overflow property: clip, ellipsis (...), initial, inherit and 'Custom string'

Example : text-overflow

.your-class {

    overflow:hidden;

    text-overflow: ellipsis;

}

Truncate a text with white-space, overflow and text-overflow

Example :

.your-class {

  width: 100px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}