How can I break up text with whitespace but also if it's too long?

Question

So I think I have a bit of a dilemma.

I have a grid that with fixed width columns but not fixed width rows.

So, I have a scenario like here

Column1, row 1: 
ThisisalongtextstringthatdoesnotcontainspacesthatIneedtobreakup

Column2, row2:
This is a long text string that has whitespace and I would like to cut based on whitespace between words.

Here's my attempts to making these strings lookg alright in my grid:

.k-grid td {
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    padding: 0.4em 0.6em;
    vertical-align: middle;
    white-space: normal;
    word-break: keep-all;
}

The above solution breaks up the second string using whitespace and restricting it to the column width which makes the string look readable.

However the above snippet also does not break up the long string above.

I used using word-break: break-all; which is also great (since the string first is broken up and doesn't run into the other columns) but with the second string, it break ups like word something like below (which I don't want):

Break-all does this to whitespace words:

This is a long first name wit
h

So that the h is hanging off but I would prefer to have the with on the second line.

So, I'm wondering how can I deal with both problems?

Answer 1

Use word-wrap: break-word; :

From MDN's docs

break-word
Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

 div { width: 100px; padding: 10px; outline: 1px solid silver; word-wrap: break-word; } 

 <div> ThisisalongtextstringthatdoesnotcontainspacesthatIneedtobreakup </div> <div> This is a long text string that has whitespace and I would like to cut based on whitespace between words. </div> 

Answer 2

I think what you are looking for is word-wrap: break-word;

Example

Answer 3

You need to use break-word :

word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;

The hyphens are fallbacks.

If you wanted to break every single letter to a new line, rather than by word, you can use word-break:break-all; .

Example

Inspired by CSS Tricks

Answer 4

I recently encountered this issue with my own development and was unable to find a CSS solution that worked consistently with the browsers that the site needed to support. The other answers suggest using word-break: break-word , which will work well in some modern browsers, but some browsers interpret this the same as word-break: break-all .

I presume that you are using server-side code to create the table. One way to accommodate older browsers is to break up long words by inserting a zero-width space (​), giving those older browsers a clue where long words can be broken. When receiving the text, my code would find words longer than 20 characters and break the word into 20-character portions with the zero-width space.