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

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.