CSS Word Wrapping and Text Overflow Propertys | Drupal 8

CSS Word Wrapping and Text Overflow Propertys

Submitted by editor on Mon, 06/20/2016 - 14:29
  • How to disable / turn off HTML word wrapping using CSS ?
  • How to handle ?
  • How to Truncate a text using CSS ?

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;width: 150px; overflow: hidden;}


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 {
    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;



Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.