ホームページ > ウェブフロントエンド > CSSチュートリアル > 長い単語が DIV レイアウトを壊さないようにするにはどうすればよいですか?

長い単語が DIV レイアウトを壊さないようにするにはどうすればよいですか?

DDD
リリース: 2024-12-11 06:44:10
オリジナル
402 人が閲覧しました

How to Prevent Long Words from Breaking Your DIV Layout?

長い単語が Div レイアウトを壊さないようにする

問題:

DIV レイアウトでは、頻繁に次のような問題が発生します。長い単語が div コンテナの境界を越えて拡張され、専門的でない文章が作成される問題

解決策:

ソフト ハイフン (­):

ブラウザをガイドするために適切な間隔でソフト ハイフンを挿入します。長い単語をどこで区切るか。ブラウザでは通常、単一の単語としてレンダリングされたソフト ハイフンを使用した単語、または単語の途中にハイフンを使用した単語が表示されます。

要素:

を挿入します。ハイフンなしで単語を分割できる場所を示す、潜在的なブレークポイントの要素。

CSS ハイフン (自動):

この CSS プロパティ (IE、Firefox でサポート) 、Safari) は、辞書に基づいて単語を自動的にハイフネーションします。ただし、すべての長い単語を効果的に分割できるわけではありません。

レトロな泣き言解決策:

表示の適用: table-cell;

空白によるオーバーフロー: pre-wrap:

オーバーフローを設定: 非表示;および空白: 事前ラップ;

追加の考慮事項:

ブラウザと検索エンジンはソフト ハイフンと を無視します。テキストを検索するときの要素。 Chrome と Firefox は、テキストをクリップボードにコピーするときにこれらを無視します。

以上が長い単語が DIV レイアウトを壊さないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート