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
Question
  • 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;}

.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;
}

 

Tags

Add new comment