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 パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...

MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション

GTIDベースのレプリケーション導入GTID ベースのレプリケーションは、MySQL 5.6 以降に...

ユーザーはその理由を知る必要がある

証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...

MySQL 5.7.17 でパスワードを忘れた場合の対処方法

1. my.iniファイルにskip-grant-tablesを追加し、MySQLサーバーを再起動し...

VirtualBox を使用して Linux クラスターをシミュレートする方法

1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...

キャッシュサーバーを構築するためのMemcached方式

序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...

優れたウェブフロントエンドデザインの指標

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...

CSSスプライト技術は複数の背景を1つのPNG画像に統合しますCSSポジショニング

アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定...

Docker を使用して MySQL および Redis サービスをデプロイする方法

目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...

製品の拡大鏡効果を実現する JavaScript

この記事では、参考までに、製品拡大鏡を実装するためのJavaScriptの具体的なコードを紹介します...

過去2年間のユーザーエクスペリエンス

<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...

MySqlはページクエリ機能を実装します

まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...