How to restrict using veeeery long words on comments section

[vadimmil]

Hi!

I'm testing a news site, build on Processwire. We use standard comments system, provided by PW. I found out, that user can easily crash the whole makeup just with a veeery looong wooord comment. 

 What is the best approach (except pre-moderation of comments) to deal with this problem?

[vadimmil]

Okey, okey, I'm just stupid enough not to know about word-break (yeah, I know, I know, guys, stop laughing). Just added this to CSS:

.CommentText p {
    max-width: 838px;
    word-break: break-word;

}

BUT. Still looking for a jQuery-based solution to do the job on the fly. There are a lot of code examples, dealing with characters/words number, but none of them can stop user from entering a veery loong stuupid word)))

[blynx]

Hej,

some ideas:

If you would consider such input as spam which does not really deserve proper display you could just cut it off inside the parent box with CSS: overflow: hidden;

Another quick hack would be to insert the invisible character ­ after every so many characters in that "word", so that the layout does not break / the word breaks so it fits into the box. This character is invisible but it tells the browser that the word is allowed to break at that point.
Have a look here and see what it does: https://jsbin.com/pipefid/edit?html,output !
I'd do this on the server side ...

You could enhance this to some "real" hyphenation algorithm ... more or less sophisticated. As time and money allows ;P

EDIT:

I think often it is URLs that blow up the boxes - you could create a Textformatter which replaces long urls with a shortened version
<a href="actual URL">shorter URL</a>

cheers!

 

[DaveP]

9 hours ago, vadimmil said:

word-break: break-word;

It's good practice to use this any time you have a container of limited width and content from an external source (like comments or an RSS feed) or perhaps where a content author may include a link, which can often be long enough to break a layout. 

[AndZyk]

Also the CSS property hyphens can come in handy, although it is not yet supported without prefixes. 

[vadimmil]

@AndZyk, thanks a lot! I'll read about this property! Suppose, I'll need to read one/two new editions relating CSS)))

11 hours ago, DaveP said:

It's good practice to use this any time you have a container of limited width and content from an external source (like comments or an RSS feed) or perhaps where a content author may include a link, which can often be long enough to break a layout. 

I see it now. Thanks for mentioning it. It's my first site with any user input, so, I think, I should check some common security and UI approaches.

19 hours ago, blynx said:

EDIT:

I think often it is URLs that blow up the boxes - you could create a Textformatter which replaces long urls with a shortened version
<a href="actual URL">shorter URL</a>

cheers!

 

And now - URLs! I've forgotten about them at all! Thanks, will test the form again)))