テキスト関連のスタイルと jQuery オブジェクトの高さと幅の問題についてそれぞれ説明します_jquery

WEB 開発では、テキスト処理に関する問題がよく発生します。ここでは、jQuery のオブジェクトの高さの問題についても説明します。

1. CSS 内の関連テキスト。

1、word-break:normal | keep-all
単語内での改行を許可するかどうかを設定または取得します。 > 通常: ブラウザのデフォルトの処理方法。
keep-all: コンテナ境界に遭遇した場合、単語は分割されません。
break-all: コンテナ境界に遭遇した場合、単語は分割される可能性があります。 ;

2, word-wrap:normal | Break-word
コンテンツが指定されたコンテナーの境界を越えたときにブレークするかどうかを設定または取得します。 >normal: コンテンツがコンテナの境界を超えると、コンテンツは壊れる可能性があります。コンテナの境界を開くかオーバーフローします。
break-word: コンテンツがコンテナの境界を超えると、コンテンツはコンテナの境界で折り返されます。コンテナの境界;

3、空白: 通常 | pre-wrap |
オブジェクト内のスペースの処理方法を設定または取得します。ブラウザのデフォルトの処理方法。
pre: 空白は結合せず、コンテンツがコンテナの境界を越える場合は折り返されません。
nowrap: すべてのテキストを強制的に 1 行に表示し、最後まで余分な空白を結合します。テキストまたは br オブジェクトに遭遇します。
pre-wrap: テキスト間の空白をマージせず、コンテンツが大きい場合は折り返します。
pre-line: テキスト間の空白と改行を保持しません。コンテンツが長い場合に発生します。

4、text-transform: なし、大文字、小文字、
なし、またはテキストを取得します。そのまま、変換しません。
大文字: 各単語の最初の文字を大文字に変換します。
小文字: すべての単語を小文字に変換します。 width: すべてのテキストは全角形式に変換され、対応する全角形式がない場合はそのまま残されます。

5, text-overflow:clip | ellipsis
取得したテキストがコンテナの境界を越えた場合の処理​​方法を設定します。
clip:コンテンツが境界を越えた場合、余分な部分がクリップされます。 ;
ellipsis : コンテンツが境界を超える場合、超過部分は省略記号で表されます。
注: この属性を機能させるには、white-space=nowrap、overflow=hidden、およびこれら 2 つの属性を設定する必要があります。 text-overflow;

6, text-indent:
オブジェクト内のテキストのインデントを取得または設定します。 ;
長さ: テキストのインデントは長さの値を指定します。負の値にすることもできます。
パーセント: テキストのインデントはパーセント値を指定します。負の値にすることもできます。

ハンギング: ブロックコンテナーの最初の行、または内部の各強制改行の最初の行にインデント効果を定義します。ソフト改行は影響を受けません。
each-line: すべてのインデントされた効果行を反転します。 ;
など: p{text-indent:2em each-line}

7,line-height:normal
を取得または設定します。オブジェクトの行の高さ、つまりテキスト文字の最下位から最上位までの距離。
normal: デフォルトでは、コンテンツは指定されたコンテナーを開くか終了することができます。
length: 指定されたコンテナーを使用します。行の高さを指定する値 (負の数値も可能) ;
percentage: 行の高さを指定したパーセンテージで指定します (負の数値も可能)
number: 行の高さを積係数で指定します。

例:




コードをコピー

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

ここのテキストがコンテナを超える場合、省略記号付きで表示されます。 text... text... abc66666666666666666666

2. DOM オブジェクト


高さ関連のメソッドは、height()、outerHeight()、outerHeight(true)、幅関連のメソッドは、width()、outerWidth()、outerWidth です。 (true)

id=div_id の div オブジェクトがある場合、さまざまな幅と高さは次のように計算されます:


コードをコピー


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

$("#div_id").height() / $("#div_id").width();取得されるのは div 自体の高さ/幅です (パディング、マージン、ボーダーを除く) $("#div_id").outerHeight() / $("#div_id").outerWidth(); // が含まれます。 div自体の高さ/幅、パディングの上下の高さ/幅、ボーダーの上下の高さ/幅(マージンの高さ/幅を除く) $("#div_id") .outerHeight(true) / $( "#div_id").outerWidth(true); // div 自体の高さ/幅、およびパディング、ボーダー、マージンの合計の高さ/幅が含まれます

例:

コードをコピーします

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

div 情報: 高さ: 30px、幅: 500px、パディング:10px 20px; margin:10px 5px、