CODEWITHSUNDEEP
javascripthtmlcss
Sylvain
Sylvain

Reputation: 19269

How to force breaking of non breakable strings?

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 contain breakable characters (space, point, comma, etc...).

Is there any way to fix this using html, css or even javascript?

See this link for an example of the problem.

Upvotes: 7

Views: 6012

Answers (9)

Kinga the Witch
Kinga the Witch

Reputation: 129

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  |

Upvotes: 2

Omiod
Omiod

Reputation: 11643

The issue with using &shy; 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

Upvotes: 1

gnarf
gnarf

Reputation: 106392

Based on this article and this one as well: the "Shy Hyphen" or "Soft Hyphen" can be written in HTML as: &shy; / &#173; / &#xAD (173 dec = AD hex). They all convert to the U+00AD character.

The JavaScript textContent and nodeValue of the DOM Text Nodes are not 'entity encoded' - they just contain the actual entities. In order to write these characters you must therefore encode them yourself: \xAD is a simple way to write the same character in a JavaScript string. String.fromCharCode(173) would also work.

Based on your own VERY good answer - a jQuery Plugin version:

$.fn.replaceInText = function(oldText, newText) {
  // contents() gets all child dom nodes -- each lets us operate on them
  this.contents().each(function() {
    if (this.nodeType == 3) { // text node found, do the replacement
        if (this.textContent) {
            this.textContent = this.textContent.replace(oldText, newText);
        } else { // support to IE
            this.nodeValue = this.nodeValue.replace(oldText, newText);
        }
    } else {
      // other types of nodes - scan them for same replace
      $(this).replaceInText(oldText, newText);
    }
  });
  return this;
};

$(function() {
    $('div').replaceInText(/\w{10}/g, "$&\xAD");
});

A side note:

I think that the place this should happen is NOT in JavaScript - it should be in the server side code. If this is only a page used to display data- you could easily do a similar regexp replace on the text before it is sent to the browser. However the JavaScript solution offers one advantage(or disadvantage depending on how you want to look at it) - It doesn't add any extraneous characters to the data until the script executes, which means any robots crawling your HTML output for data wont see the shy hyphens. Although the HTML spec interprets it as a "hyphenation hint" and an invisible character its not guaranteed across the rest of the Unicode world: (quote from Unicode standard via the second article I linked)

U+00AD soft hyphen indicates a hyphenation point, where a line-break is preferred when a word is to be hyphenated. Depending on the script, the visible rendering of this character when a line break occurs may differ (for example, in some scripts it is rendered as a hyphen -, while in others it may be invisible).

Another Note: Found in this other SO Question - it seems that the "Zero Width Space" character &#8203; / &#x200b; / U+200b is another option you might want to explore. It would be \x20\x0b as a javascript string.

Upvotes: 9

jeroen
jeroen

Reputation: 91762

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">aaaaaaaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>

Upvotes: 8

kennebec
kennebec

Reputation: 104810

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
*/

Upvotes: 0

Sylvain
Sylvain

Reputation: 19269

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 &shy; then a space. But the assigning node.nodeValue or node.textContent causes the insertion of the text &shy; 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

Upvotes: 1

AbstractProblemFactory
AbstractProblemFactory

Reputation: 9811

There is special character &#173; or &shy; that could do it. For example:

Dzie&#173;le&#173;nie wy&#173;ra&#173;zów

could be display like:

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

Upvotes: 1

Tarik
Tarik

Reputation: 81781

You can use jQuery to achieve that, but How : Let me explain a little bit. First you need to add the reference and there is a plug-in which may help you : Read More Plugin - JQuery But you need to penetrate your code during the fetch phase. At this point you can handle this problem in HttpHandler or Page_PreInit phase but w/o any server side code it must be hard or perhaps there isn't any way. I don't know but you should be able to add something in your database-fetched html page.

Upvotes: 0

user151323
user151323

Reputation:

As it has been pointed out numerous times, no, there is nothing you can do about it, without preprocessing the strings programmatically before displaying them.

I know there is a strategy with inserting the soft hyphen character (&shy;), where needed, but does not seem like a popular option.

Check out this question: Soft hyphen in HTML ( vs. ­)

Upvotes: 2

Related Questions