Non breaking lengthy word.

Question

Hi friends,

Please dont mind for adding a vulnarable content as below.

jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

I have a multiline html text editor(tiny mce). When a user enters unappropriate words, as i entered above!. It will be saved properly in database. When i am trying to display the same data using a label. The displayed data disturbs the page design.

How can i fix this issue? Please provide me a solution for this.

Thanks in advance Regards, Madhu BN

Answer 1

If you use PHP to print out the text, check out the wordwrap function.

Answer 2

In javascript, add \u200b - Zero Width Space before displaying it

YOURTEXT=YOURTEXT.replace(/(.)/g,"\u200b$1");

Answer 3

Try inserting ­ into the string. It's the HTML element for the "soft hyphen".

If using PHP, print(wordwrap($string, 75, '­'));

More info on SO: http://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

Answer 4

This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery:

(function($) {
  $.fn.breakWords = function() {
    this.each(function() {
      if(this.nodeType !== 1) { return; }

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556
        this.runtimeStyle.wordBreak = 'break-all';
      }
      else if(document.createTreeWalker) {

        //Faster Trim in Javascript, Flagrant Badassery
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript

        var trim = function(str) {
          str = str.replace(/^\s\s*/, '');
          var ws = /\s/,
          i = str.length;
          while (ws.test(str.charAt(--i)));
          return str.slice(0, i + 1);
        };

        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556

        //For Opera, Safari, and Firefox
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
        var node,s,c = String.fromCharCode('8203');
        while (dWalker.nextNode()) {
          node = dWalker.currentNode;
          //we need to trim String otherwise Firefox will display
          //incorect text-indent with space characters
          s = trim( node.nodeValue ).split('').join(c);
          node.nodeValue = s;
        }
      }
    });

    return this;
  };
})(jQuery);

Answer 5

You could use InsertAt repeatedly to achieve @Ryan's solution, or you could perform validation to prevent such malformed data from reaching the database.

Regular expressions would also make this available to put the soft-hyphen in.

Answer 6

If it's about disturbing the page design when redisplaying the user's input and if the input is "inappropriate" then apply a CSS style to cut it off by using overflow:hidden.

<style> 
    .fixed { overflow:hidden; }
</style>

Then apply it to the div or container:

<div class="fixed" style="width:100px">The following input is really long and invalid. 

fffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div>

This ensures the page layout is not disturbed. In the above example 100px is adhered to no matter the unbreaking length of the invalid text.

Edits:

If you want the wrapping behaviour try using CSS word-wrap: break-word;

<style>
.fixed {
    word-wrap: break-word;
}
</style>

Or even put them both together to be really safe across browsers.

<style> 
    .fixed { 
        overflow:hidden; 
        word-wrap: break-word;
    }
</style>

Answer 7

It can be fixed with a little CSS using overflow-x (lots of cool examples after link).

Just make sure you specify a width, otherwise overflow-x won't do you any good.

Try it here

<style>
div{
  width: 105px;
  overflow-x: hidden;
  float: left;
  margin: 10px;
  padding: 4px;
  background: orange;
}
</style>
<div>WAYTOOLONGTOBESHOWN</div>
<div>WAYTOOLONGTOBESHOWN</div>

Answer 8

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa