HTML の div、td、p、およびその他のコンテナーで強制改行と改行なしを実装する方法

高洛峰
リリース: 2017-03-09 16:18:20
オリジナル
2731 人が閲覧しました

p、td、p などのコンテナーでの強制改行または改行なしは、場合によっては非常に実用的です。次の記事に関連する知識がまとめられており、必要な場合はそれを参照してください。 1. 強制的に改行を行わず、省略記号で終わります。

コードは次のとおりです:

<p style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 
你好朋友朋友朋友我为什么不能看到效果啊 
</p>
ログイン後にコピー


2. CSS 自動行折り返し

コードは次のとおりです:

p{ word-wrap: break-word; word-break: normal; }
ログイン後にコピー


3. CSS は英語の単語の改行を強制します

コードは次のとおりです:

p{word-break:break-all;}
ログイン後にコピー


p がネストされている場合、内側の層 p が内容に応じて自動的に折り返されるようにします。設定できるのは外側の p の幅とwhite-spance:nowrapのみです。

word-break:break-all と word-wrap:break-word は、p などのコンテナのコンテンツを自動的にラップできます

それらの違いは次のとおりです:

1、word-break:break-all (p など)幅が 200px の場合、行末に長い英単語 (congratulation など) がある場合、その単語が切り捨てられ、conra (congratulation の前の部分) に変換されます。行の終わり 次 行動の調整 (conguatulation) のバックエンド部分。

2. word-wrap:break-word の例は上記と同じですが、行末が単語全体を表示するのに十分な幅がない場合に、単語全体を祝福する点が異なります。単語が切り捨てられることなく、単語全体が自動的に次の行に配置されます。

3、word-break;break-all サポートされているバージョン: IE5 以降 この動作は、アジア言語の通常の動作と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、非アジアのテキストを含むアジアのテキストに適しています。

WORD-WRAP:break-word 対応バージョン:IE5.5以降 コンテンツは境界内で折り返されます。

必要に応じて、単語の区切りも発生します。テーブルは自動的に折り返され、伸びを防ぎます。

word-break : 通常 | Break-all | keep-all

パラメータ:

normal : アジア言語および非アジア言語のテキスト規則に従って単語内の改行を許可します

break-all : この動作アジアの言語と一致しています 通常は同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、アジア以外のテキストを含むアジアのテキストに適しています

keep-all : すべての非アジア言語の通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア語テキストを含む非アジア語テキストに適した構文:

word-wrap :normal | Break-word

パラメータ:

normal : コンテンツが指定されたコンテナ境界を破ることを許可します

break-word : Content境界内で折り返されます。必要に応じて、ワードブレークも行われます。 説明: 現在の行が指定されたコンテナーの境界を超えたときに行を区切るかどうかを設定または取得します。

対応するスクリプト機能はwordWrapです。私が書いた他の本もご覧ください。 構文: table-layout: auto | fix パラメータ: auto: デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づきます。各セルが読み取られて計算されるまで、テーブルは表示されません。非常に遅い修正: レイアウト アルゴリズムを修正しました。このアルゴリズムでは、水平レイアウトは表の幅、表の境界線の幅、セル間隔、および列の幅のみに基づいており、表の内容とは関係ありません。または、テーブルのレイアウト アルゴリズムを取得します。対応するスクリプト属性は tableLayout です。

提案: 3C でワードブレイクを検出すると問題が発生し、Baidu スナップショットでも問題が発生します。この属性は OPERA FIREFOX ブラウザではサポートされていないため、代わりにwhite-space:normal; を使用できます。 FireFox で使用できます。改行は IE および IE で正しく実行できます。単語間のスペースを使用して置換することはできません。そうしないと改行が正しく実行されないことに注意してください。

以上がHTML の div、td、p、およびその他のコンテナーで強制改行と改行なしを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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