Very long words - what to do?

The essence of the problem

The ability of the user to enter a sooooo long word without spaces, and thereby "blow up" the layout is an old problem. That's how it is decided on Habré.



It can be solved in several ways.

Through the styles of the final div

1) style = " word-wrap: break-word" - but this way is IE-only

2) style = " overflow: auto; white-space: nowrap" - works everywhere, standard solution. But scroll bars appear.

3) style = " overflow: hidden; white-space: nowrap" - works everywhere, standard solution. "Lost" part of the word (not visible).

')

From php

4) break the word in soft hyphenation every N characters. Where N is the maximum length of the word you set.

5) delete such word



In the current project, I used the first four approaches. The latter did not seem necessary to me.

Execute can not be pardoned

At the request of the customer contextual advertising script has been added. And the tester immediately found a problem - he entered a word too long, and the advertising system (it’s contextual) when trying to send such a word to be processed by the server (even if the word was broken by soft hyphenation) just hung the browser. More precisely, not quite to hang. IE reacted and after 20 seconds offered to break the script. Firefox for some reason failed and just hung up :(



In general, there was a problem of total cutting out too long words. Of course, it was possible to do this in a standard way - break the line by spaces (\ s +) and then measuring the length of each word, throw out too long and glue the line back. But it is ugly :) I wanted to do it only regulars.

Decision

I expected that the construction of the form [^ \ s] {512,} would work, where 512 is the maximum allowed length of the “word”. However, this design refused to work. The construction of [^ \ s] {512} did not fit, since after it there were “tails” (for example, if a word is 600 characters long).



A little torment came to the exit, which met all requests:



preg_replace ( '/ [^ \ s] {512} [^ \ s] + /' , '' , $ string )



Thus, all long words were successfully cut out. And if you like, you could easily “improve” the mechanism, not cutting out the words completely, but leaving the allowed length and adding ellipsis.



preg_replace ( '/ ([^ \ s] {512}) [^ \ s] + /' , '$ 1 ...' , $ string )



And how did you solve this problem?



UPD: comments also suggest using overflow: hidden for all places where user data is not displayed in input fields.



UPD2: atukai suggested not only to put ellipsis in the improvement, after the allowed number of characters, but also to show the full word in Hint-e.

That is, it will look like this somewhere:

preg_replace ( '/ ([^ \ s] {25}) [^ \ s] + /' , '<span title = "$ 0"> $ 1 ... </ span>' , $ string )





UPD3: dandelion reminded me that I completely forgot about the wordwrap function. For this problem, you can use it like this:

$ string = wordwrap ( $ string , 512 , '& shy;' , true );

However, it must be remembered that this function does not work correctly with UTF-8.