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>