☰

長い単語がdivを分割するのを防ぐにはどうすればいいですか? 質問する

tag-icon • tag-icon css layout html
長い単語がdivを分割するのを防ぐにはどうすればいいですか? 質問する

TABLE レイアウトから DIV レイアウトに切り替えて以来、共通の問題が 1 つ残っています。

問題: DIV に動的テキストを入力すると、必然的に div 列の端からはみ出した非常に長い単語が出現し、サイトがプロフェッショナルに見えなくなります。

レトロ泣き言： これ一度もないテーブル レイアウトで発生しました。テーブル セルは常に最長の単語の幅に合わせて適切に拡張されます。

重大度: この問題は、最も主要なサイトでも発生しています。特に、ドイツ語のサイトでは、「速度制限」などの一般的な単語でさえ非常に長い (「Geschwindigkeitsbegrenzung」) のが目立ちます。

これに対する実行可能な解決策を持っている人はいますか?

ベストアンサー1

ソフトハイフン

ソフトハイフン ( ­) を挿入することで、ブラウザに長い単語をどこで分割するかを伝えることができます。

averyvery­longword

次のように表現される。

非常に長い単語

または

非常に
長い単語

適切な正規表現を使用すると、必要な場合を除いて挿入されないようにすることができます。

/([^\s-]{5})([^\s-]{5})/ → $1­$2

ブラウザと検索エンジンは、テキストを検索するときにこの文字を無視するほど賢く、Chrome と Firefox (他はテストしていません) は、テキストをクリップボードにコピーするときにこの文字を無視します。

<wbr>要素

もう一つの選択肢は<wbr>、前者のIE主義、現在はHTML5で:

averyvery<wbr>longword

ハイフンなしの改行:

非常に
長い単語

ゼロ幅スペース文字&#8203;(または&#x200B) でも同じことを実現できます。

ちなみに、CShyphens: auto最新のIE、Firefox、Safariでサポートされています（ただし、現在はChromeではありません):

div.breaking {
  hyphens: auto;
}

ただし、このハイフネーションはハイフネーション辞書に基づいており、長い単語を分割することが保証されているわけではありません。ただし、両端揃えのテキストをより美しくすることはできます。

レトロな泣き言の解決策

<table>レイアウトは悪いですが、display:table他の要素では問題ありません。昔ながらのテーブルと同じくらい風変わりで伸縮性のあるものになります。

div.breaking {
   display: table-cell;
}

overflow以下の回答もwhite-space: pre-wrap良いと思います。

おすすめ記事