検索
ホームページウェブフロントエンドCSSチュートリアルCSSで英単語を自動で折り返す方法の紹介

CSS は英語の単語の自動行折り返しを可能にします
Web ページを作成して CSS スタイルを記述する過程で、多くの初心者を悩ませる英語の行折り返しの問題に遭遇する可能性があります。今日はこの問題について詳しく説明します。 CSS を勉強したことのある友人なら、CSS の word-break を使用してテキストの区切りを直接調整できることを知っているはずです。ただし、英語の場合は、この属性だけでは十分ではありません。
私が個人的に知っている情報によると、英語が多すぎると長すぎるとフォームに影響を与えるだけでなく、フォームとpが壊れる可能性があります。 まず、フォームとpの解決策が異なります。フォームでこの問題を解決する方法を見てみましょう。
テーブル レイアウトを使用していて、テーブルの内容がほとんど英語であり、英語が壊れない場合は、次のコードを css
table {
table-layout: fix; に追加するだけです。 -break :break-all;
word-wrap:break-word;
}
p+css レイアウトを使用する場合、p のテキストが英語で壊れている場合は、次のコードを css
p{
word-break:break-all;
word-wrap:break-word;
}
CSS2 中国語マニュアルによる
word-break バージョン: IE5+ 独自プロパティの継承: あり
構文:
word-break:break-all | keep-all
値:
normal: デフォルト値、単語間の改行を許可します。
break-all: この動作はアジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています。
keep-all: すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適しています
説明:
オブジェクト内のテキストの単語内折り返し動作を設定または取得します。特に複数の言語が登場する場合。
中国語の場合は、ブレークオールを使用する必要があります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能はwordBreakです。
例:
p {word-break : Break-all; }
適用対象:
IE5.0+
word-wrap バージョン: IE5.5+ 独自のプロパティ 継承: あり
構文:
word-wrap:normal | -word
Value:
normal: デフォルト値。コンテンツが指定されたコンテナ境界を破ることを許可します
break-word: コンテンツは境界内で分割されます。必要に応じて、ワードブレークも発生します。
説明:
現在の行が指定されたコンテナの境界を超えたときにブレークするかどうかを設定または取得します。
このプロパティは、ブロック オブジェクトなどのレイアウトを持つオブジェクトでのみ機能します。インライン要素でこの属性を使用するには、最初にオブジェクトの高さ属性または幅属性を設定するか、位置属性を ABS に設定するか、表示属性を block に設定する必要があります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能はwordWrapです。
例:
p { word-wrap:break-word; word-break:break-all; }
次の点に注意してください
break-word : コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも発生します
したがって、デフォルトでは単語の区切りは分離されませんが、誰かが最後に間違ったバージョンの履歴を投稿したときなど、非常に長い単語がある場合は、単語の折り返しで十分です。最も恐ろしい 12 の英単語は行に分割することもできるため、表が傷つくのを防ぐことができます。
ただし、これは w3c によって css2 標準として採用されていないため、Mozilla はこの属性をサポートしていません。誰かが英語の単語を書いても、Firefox は単語を分割して改行することはありません。非常に長い単語、Mozilla Firefox そうすれば改行は常に改行されなくなります。

以上がCSSで英単語を自動で折り返す方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PM

Goofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています

時代を超越したWeb開発記事時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AM

Pavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました

セクション要素との取引セクション要素との取引Apr 12, 2025 am 11:39 AM

2つの記事がまったく同じ日に公開されました。

graphQlの練習JavaScript APIでクエリをクエリしますgraphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AM

GraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます!そして、それは私が完璧になったことがあります

コンポーネントレベルのCMSコンポーネントレベルのCMSApr 12, 2025 am 11:09 AM

コンポーネントがデータが近くに住んでいる環境に住んでいる場合、視覚コンポーネントと

円にタイプを設定します...オフセットパス付き円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AM

ここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私

CSSで「戻る」ことは何をしますか?CSSで「戻る」ことは何をしますか?Apr 12, 2025 am 10:59 AM

Miriam Suzanneは、このテーマに関するMozilla開発者のビデオで説明しています。

現代の恋人現代の恋人Apr 12, 2025 am 10:58 AM

私はこのようなものが大好きです。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール