Non breaking lengthy word - html

Question

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 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 2

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

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: Soft hyphen in HTML (<wbr> vs. ­)

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

In javascript, add \u200b - Zero Width Space before displaying it
YOURTEXT=YOURTEXT.replace(/(.)/g,"\u200b$1");

Answer 6

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