CSS adding word break

Problem: Sometimes when you design your webpage, your content might be overlapping with the content in another columns

Additional complexity: if you are using CSS flex box – flex-wrap: wrap will only wrap the sections, individual contents cannot be reliably targetted with this.

Precondition: width of the content that needs to be word wrapped must be set using either percentage, em or pixels

Solutions:

  1. Use – word-break: break-all;
    1. break-all will break individual alphabets of the words and everything will wrap around
  2. Use – word-wrap: break-word;
    1. break-word will break the word when the max width will read. Alphabets wil not be wrapped
  3. Use – tex-overflow: ellipsis
    1. Used like: white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    2. This will not wrap words but put ellipsis (…) when the maximum width is reached

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s