記事を書くときに、長い文字列をスペースなしで使用する必要があり、単語を改行して折り返す代わりに、これらの単語を独自の行に入れます。これは、先行する文章の空白の大きな隙間を残す。長い単語がブレークワードを使用して新しい単語に表示される
あなたはセクション「どのようCryptoRogerは、被害者のファイルを暗号化し、」ここでこの例を見ることができます：私もこのフィドルに例を追加しました
：
https://jsfiddle.net/s5u53vmq/
私のCSSは現在以下のように設定されているので、単語がdivをオーバーフローせず、私は休憩を望んでいます。
.articleBody p {
word-wrap: break-word;
overflow-wrap: break-word;
}
私はこれらの長い単語が次の行に移動するのではなく壊れないようにするために使用すべきことはありますか？
あなたが余分なマークアップを使いたいと思わない限り、私はあなたがブラウザの意志であり、長く実行されているテキストをどのように扱うのかと思います。
このソリューションでは余分なマークアップも必要ですが、単語が壊れる場所ではさらにダイナミックです。 <wbr>や<shy>などのソリューションは機能しますが、仕事を壊すためには正確な場所を指示する必要があります。状況によっては、これが望ましいものです。私のソリューションでは、あなたが壊したい単語を囲む単一のタグを必要とし、それを動的に分割します。
.inline-word-wrap {
word-break: break-all;
}<p>
When the ransomware is done encrypting your files it will open the ransom
note called <strong>!Where_are_my_files!.html</strong> as shown
above. This ransom note will contain instructions stating developer at
the uTox address <span class="inline-word-wrap">F12CCE864152DA1421CE717710EC61A8BE2EC74A712051447BAD56D1A473194BE7FF86942D3E.</span>
</p>あなたJSFiddleを更新しました。
ありがとうございます。 CSSを使ってこれを100％動的に行う方法があることを願っていますが、この解決法は少なくとも私が長い言葉をラップし、ブラウザがどのようにラップするかを決めることを可能にします。提案していただきありがとうございます。 – Lawrence
はい、純粋なCSSソリューションにはいいですね。ある場合は私はそれを見ていない。それがパイプラインを降りてくるかどうかは分かりません。私は現在の実装が最初の場所でブレークしないようにしようとしていると仮定しています。それはなぜ次の行にドロップしてから必要に応じてブレークするのかという意味です。私は彼らが '[space] [word] [space]'のために行っている視覚的なパターンだと思います。たぶん、この行動のやり方をより深く理解している人が、私たちに一本のラインを落とす可能性があります。 – hungerstar
HTML5およびAFAIKで導入された<wbr>タグは、すべての場所でサポートされているため、一連の文字列を分割することが許可されています。あなたの問題を解決するはずです。
.articleBody p{
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
別の解決策 - CSSを使用して
私はこのタグについて知らなかったので、情報をありがとう。これは動作しますが、これらのタグを実装する必要はなく、CSSで自動化できるものを探しています。 – Lawrence
。省略符号付きオーバーフローの防止 -
.articleBody p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
残念ながら、これらのどちらも動作しません。ここをクリックしてください：https://jsfiddle.net/s5u53vmq/ – Lawrence
をあなただけ使って長い文字列では、ブラウザのためのブレークポイントをマークすることができます。ダッシュで
­休憩私はこのタグについて知らなかったので、情報をありがとう。これは動作しますが、これらのタグを実装する必要はなく、CSSで自動化できるものを探しています。 – Lawrence
見えない
​休憩を<shy>タグ（「ソフトハイフン」）では、行間の区切り（ハイフンを含む）がすべて負っている。そうすれば、行の終わりに近い位置では単語が壊れることはありませんが、あなたが許可する位置でのみ単語が壊れます。 抽象例：それは行の末尾に最も近い<shy>タグに（ハイフン）破壊さ一行Oに収まる場合abcdef<shy>ghijkl<shy>mnopq<shy>rstuvwxyzはabcdefghijklmnopqrstuvwxyzとして書き込まれます。
私はこのタグについて知らなかったので、情報をありがとう。これは動作しますが、これらのタグを実装する必要はなく、CSSで自動化できるものを探しています。 – Lawrence
これは機能しています。明らかな方法ではありません。 'uToxアドレス 'を10文字分拡張すると、それが動作することがわかります。できるだけ多くの単語を壊す前に、ブラウザが新しい行に移動させることは明らかではありません。しかし、いくつかの意味があります。 – hungerstar
Thx。スタイル上の理由からその大きな空白を取り除く方法を見つけ出すことが大好きです。完璧な世界では、uToxアドレスの直後に長い単語が始まり、ちょうど壊れてしまい、流れが良くなります。 – Lawrence
私は問題を示すフィドルを追加しました。 https://jsfiddle.net/s5u53vmq/ – Lawrence