問題の本質
スペースのないすっごく長い単語を入力し、それによってレイアウトを「爆発」させるユーザーの能力は古い問題です。 それが、Habréでの決定方法です。
いくつかの方法で解決できます。
最終divのスタイルを介して
1)style = " word-wrap: break-word"-ただし、この方法はIE専用です
2)style = " overflow: auto; white-space: nowrap"-どこでも動作する標準ソリューション。 しかし、スクロールバーは表示されます
3)style = " overflow: hidden; white-space: nowrap"-どこでも動作する標準ソリューション。 単語の「失われた」部分(見えない)。
PHPから
4)N文字ごとに単語をソフトハイフンで区切ります。 Nは、設定した最大許容語長です。
5)そのような単語を削除する
現在のプロジェクトでは、最初の4つのアプローチを使用しました。 後者は私には必要ないと思われました。
実行は許されません
顧客の要求に応じて、コンテキスト広告スクリプトが追加されました。 そして、テスターはすぐに問題を見つけました-彼は単語を長すぎて入力し、そのような単語を処理するために彼のサーバーに送信しようとすると(単語がソフトハイフネーションによって壊れていたとしても)広告システムは単にブラウザを切った。 より正確には、完全にぶら下がっていたわけではありません。 IEは反応し、20秒後にスクリプトの中断を提案しました。 何らかの理由でFirefoxが失敗し、電話が切れました:(
一般に、長すぎる単語を切り取るという問題が発生しました。 もちろん、これは標準的な方法で行うことができます-行をスペース(\ s +)に分割し、各単語の長さを測定して長すぎてスローして行を接着します。 しかし、これはいです:)私は定期的にだけそれをしたかったです。
解決策
フォーム[^ \ s] {512、}の構成が機能すると予想しました。512は「単語」の最大許容長です。 ただし、この設計は機能しませんでした。 構文[^ \ s] {512}は適合しませんでした。なぜなら、その後に「テール」があったからです(たとえば、単語の長さが600文字だった場合)。
少し苦しんだ後、彼らは出口に来て、すべての要求を満たしました:
preg_replace( '/ [^ \ s] {512} [^ \ s] + /' 、 '' 、 $ string )
したがって、すべての長い単語が正常に切り取られました。 必要に応じて、単語を完全に切り取らずに、許可された長さを残して省略記号を追加して、メカニズムを簡単に「改善」できます。
preg_replace( '/([^ \ s] {512})[^ \ s] + /' 、 '$ 1 ...' 、 $ string )
この問題をどのように解決しましたか?
UPD:コメントでは、入力フィールドにユーザーデータが表示されていないすべての場所で、overflow:hiddenを使用することを提案しています。
UPD2: atukaiは、許可された文字数の後に省略記号を付けるだけでなく、ヒント全体に単語全体を表示することも提案しました。
つまり、次のようになります。
preg_replace( '/([^ \ s] {25})[^ \ s] + /' 、 '<span title = "$ 0"> $ 1 ... </ span>' 、 $ string )
UPD3: タンポポは、 ワードラップ機能を完全に忘れたことを思い出しました。 この問題については、次のように使用できます。
$ string = wordwrap( $ string 、 512 、 '&shy;' 、 true );
ただし、この関数はUTF-8では正しく機能しないことに注意してください。