CSS での文字の折り返しに関するいくつかの問題-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS での文字の折り返しに関するいくつかの問題

高洛峰

Nov 24, 2016 pm 01:24 PM

css

CSS の単語区切りでこの問題を解決できます。メモを取るためのテストページを作成します。

CSS コード:

 body{font-size:14px;}
 p{ border:solid 1px red;width:200px;}
 
 
 
<body>
    <p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
        123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish
       
    </p>
</body>

この時点での実行効果は、タイトルの冒頭で述べたとおりです。 p タグ

css コード:

.test{ word-break:break-all;}

中国語、英語、数字を問わず、パッケージの p タグの末尾ですべてのテキストが自動的に強制的に改行されることがわかります。これには問題があります。効果を確認するために、元の組み合わせである文字列を分割します。別の

CSS コードを見てください:

.test {word-break:hyphenate;}

この CSS は、ラップされた要素の文字セグメントを分割し、ハイフネーションのところで事前にラップする可能性があります。ポイント

CSS コードをもう一度見てください:

 .test{ word-break:keep-all;}

すべての文字フィールドの整合性を維持しながら、すべての文字フィールドとそれらの間のスペースで新しい行をラップします。ラップされた要素の分割

word-break にはいくつかの属性もあります:

css コード:

 .test{ word-break:normal;}/*浏览器默认换行*/

単語の整合性を維持する必要がない場合、break-all は次の問題を解決できます。実際のアプリケーションでは、長さがコンテナの幅を超える単語は存在しないため、ハイフネーションを使用すると、コンテナを分割せずに単語を完全に保つという問題を解決できます。次に、シナリオによっては、スクロールバーまたはオーバーフローが発生します。 :hidden はインターフェースの整合性を維持するために使用できます。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

擬似要素は子供であることを少し思い出させてください。Apr 19, 2025 am 11:39 AM

ここに＆＃039;いくつかの子供の要素を持つ容器があります：

「ダイナミックヒットエリア」のメニューApr 19, 2025 am 11:37 AM

フライアウトメニュー！ Hoverイベントを使用してメニュー項目をより多く表示するメニューを実装する必要がある2番目の場合は、トリッキーな領域にあります。 1つは、そうすべきです

WebVTTを使用したビデオアクセシビリティの改善Apr 19, 2025 am 11:27 AM

「Webの力はその普遍性にあります。障害に関係なくすべての人からのアクセスは重要な側面です。」

毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加Apr 19, 2025 am 11:25 AM

今週、＃039;のラウンドアップ：DatePickersはキーボードユーザーのHeadachesを提供しています。これは、Foucとの戦いに役立つ新しいWebコンポーネントコンパイラであり、最終的にスタイリングリストのアイテムマーカーと、サイトでWebメントを取得するための4つのステップを手に入れます。