How to force breaking of non breakable strings?

Question

I have an HTML page that I generate from the data contained in a database. The database sometimes contains long strings that the browser can\'t break because the strings don\'t

Answer 1

It is also possible to use word-break css property to cut every word on the element edge.

.selector_name {
  word-break: break-all;
}

<p class="selector_name">some words some words some words some words</p>

you can obtain:
some word|
s some wo|<-edge of the element
rds some |
words som|
e words  |

Answer 2

There is special character ­ or ­ that could do it. For example:

Dzie­le­nie wy­ra­zów

could be display like:

 1. dzie
 2. le
 3. nie wy
 5. ra
 6. zow

Answer 3

Yes you can, just set the css property of the box to:

.some_selector {
    word-wrap: break-word;
}

Edit: Some testing shows that it does work with a div or a p - a block level element - but it does not work with a table cell, nor when the div is put inside a table cell.

Tested and works in IE6, IE7, IE8, Firefox 3.5.3 and Chrome.

Works:

<div style="word-wrap: break-word">aaaaaaaaaaaaaaaaaaaaaaffffdffffdffffdffffdffffdffffdffffdffffdffffdffffdffffdffffdffffdffffdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>

Answer 4

The issue with using ­ and the solutions above is that an extra character is still there, and with a copy/paste action (even in plain text) it comes out.

I would use instead the tag <wbr> that is not visible and is not considered when copying.

For example, to have email addresses break in two lines (only when there is not enough space) I use this:

echo str_replace( "@","<wbr>@", $email );

That results in something like this:

name.surname
@website.com

Answer 5

I'm answering my own question here...

Based on your answers, I came up with this solution (thanks to @CMS in this question for his help).

This script breaks any word that is more than 30 characters long by inserting a space at the 31st position.

Here is the fixed version: link

I have one problem left, I'd rather insert a ­ then a space. But the assigning node.nodeValue or node.textContent causes the insertion of the text ­ not the tag.

<script type="text/javascript">

    $(function() {
        replaceText(/\w{30}/g, "$& ", document.body);
    });

    function replaceText(oldText, newText, node) {
        node = node || document.body; // base node 

        var childs = node.childNodes, i = 0;

        while (node = childs[i]) {
            if (node.nodeType == 3) { // text node found, do the replacement
                if (node.textContent) {
                    node.textContent = node.textContent.replace(oldText, newText);
                } else { // support to IE
                    node.nodeValue = node.nodeValue.replace(oldText, newText);
                }
            } else { // not a text mode, look forward
                replaceText(oldText, newText, node);
            }
            i++;
        }
    }

</script>

I'll wait a few days before I accept this answer in case someone comes up with a simpler solution.

Thanks

Answer 6

It's easier to break up the long words from a text string, before you add them to the document.

It would also be nice to avoid orphans, where you have only one or two characters on the last line.

This method will insert spaces in every unspaced run of characters longer than n, splitting it so that there are at least min characters on the last line.

function breakwords(text, n, min){
 var L= text.length;
 n= n || 20;
 min= min || 2;
 while(L%n && L%n<min)--n;
 var Rx= RegExp('(\\w{'+n+',}?)','g');
 text= text.replace(Rx,'$1 ');
 return text;
}

//test

var n=30, min=5;

var txt= 'abcdefghijklmnopqrstuvwxyz0123456789 abcdefghijklmnopqrstuvwxyz012345678 abcdefghijklmnopqrstuvwxyz01234567 abcdefghijklmnopqrstuvwxyz0123456';

txt=txt.replace(/(\w{30,})/g,function(w){return breakwords(w,n,min)});

alert(txt.replace(/ +/g,'\n'))

/*  returned value: (String)
abcdefghijklmnopqrstuvwxyz0123
456789
abcdefghijklmnopqrstuvwxyz0123
45678
abcdefghijklmnopqrstuvwxyz012
34567
abcdefghijklmnopqrstuvwxyz01
23456
*/