HTML の div、td、p およびその他のコンテナーでの強制改行と非改行の実装

HTML の div、td、p およびその他のコンテナーでの強制改行と非改行の実装
1. 改行を強制せず、省略記号で終了します。

コードをコピー
コードは次のとおりです。

<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" >
こんにちは、友人の皆さん、なぜ効果が見えないのでしょうか?
</div>

2. CSS自動改行

コードをコピー
コードは次のとおりです。

div{ 単語折り返し: 単語区切り; 単語区切り: 通常; }

3. CSSは英語の単語を分割する

コードをコピー
コードは次のとおりです。

div{単語区切り:すべて区切り;}

div がネストされている場合、内側の div がコンテンツに応じて自動的に折り返されるようにするには、外側の div の幅と white-spance:nowrap を設定するだけです。

word-break:break-allとword-wrap:break-wordはDIVなどのコンテナの内容を自動的に折り返すことができます。

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

1. word-break:break-all たとえば、div の幅が 200px の場合、そのコンテンツは自動的に 200px で折り返されます。行末に長い英語の単語 (congratulation など) がある場合、単語は切り捨てられ、行末は conra (congratulation の前半) になり、次の行は conguatulation の後半 (conguatulation) になります。

2. word-wrap:break-word 例は上記と同じですが、違いは「congratulation」という単語全体を全体として扱うことです。行末の幅が単語全体を表示するのに十分でない場合は、単語を切り捨てるのではなく、単語全体を次の行に自動的に配置します。

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

WORD-WRAP:break-word サポートされているバージョン: IE5.5 上記のコンテンツは境界内で折り返されます。

必要に応じて単語の区切りも行われます。テーブルは拡張を避けるために自動的に折り返されます。

単語区切り: 通常 | すべて区切り | すべて保持

パラメータ:

normal : アジア言語と非アジア言語のテキストルールに従い、単語内での改行を許可します。

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

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

単語折り返し: 通常 | 単語区切り

パラメータ:

通常: 指定されたコンテナの境界を超えてコンテンツを押し出すことを許可する

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

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

提案: word-break は 3C によって検出されると表示に問題が生じ、Baidu スナップショットでも問題が発生します - OPERA FIREFOX ブラウザはこの属性をサポートしていません。word-break 属性は white-space:normal; に置き換えることができます。これにより、FireFox と IE で行が正しく折り返されます。また、単語間のスペースは代替として使用できないことに注意してください。そうしないと、行が正しく折り返されません。

<<:  MySQL 最適化 query_cache_limit パラメータの説明

>>:  ウェブサイトのAboutページの紹介コンテンツの書き方

推薦する

mysql-joinsの具体的な使用方法

目次結合構文: 1. InnerJOIN: (内部結合) 2. LeftJOIN: (左結合) 3....

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

Vue3 における ref と reactive の詳細な説明と拡張

目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...

Tik Tok サブスクリプション ボタンのアニメーション効果を実現する CSS

少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、...

Dockerをクリーンアンインストールする方法の詳細な説明

まず、サーバー環境情報: アンインストールの理由:しばらくするとホストマシンのディスクが100%にな...

MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード

序文多くの MySQL テスト シナリオでは、テスト用に一部のテスト データを手動で生成する必要があ...

ウェブ開発におけるクロスドメインの理由に対する複数のソリューション

目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

React Diff Principle の詳細な分析

目次差分アルゴリズムレイヤーごとの比較同じタイプのコンポーネントを比較する同じタイプの要素の比較子ノ...

WeChatアプレットがフォーム検証を実装

WeChatアプレットフォームの検証、参考までに具体的な内容は次のとおりです。プラグインWxVali...

CSS で「プラス記号」効果を実装するためのサンプルコード

以下に示すプラス記号の効果を実現するには: この効果を実現するには、div 要素だけが必要です。 b...

jwtを使用してノードによって生成されたトークンをどこに保存するかについての簡単な説明

A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...

Linuxのwhichコマンドの具体的な使い方

Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...