テーブルに楕円関数を追加する方法-CSSチュートリアル-php.cn

テーブルに楕円関数を追加する方法

php中世界最好的语言

リリース： 2018-03-09 14:00:05

オリジナル

3421 人が閲覧しました

今回はテーブルに省略記号を追加する方法を紹介します。テーブルに省略記号を追加する際の注意点は次のとおりです。

1. 原因

表内の単語が多すぎる場合は省略記号を使用してくださいというリクエストを受けて、当然 text-overflow:ellipsis (, note: overflow: hidden; text-overflow:ellipsis; white を考えました。 -space: nowrap を一緒に使用する必要があります) が、テーブルでは機能しません。Baidu は、機能するには table-layout: を table 要素に固定する必要があるとすぐに言いました。そして、機能しました。

2. text-overflow:ellipsis が機能するための前提条件

コンテナの幅を必ず定義してください (重要な点)

overflow: hidden がない場合、テキストは外側に拡張されます。空白がない場合: nowrap; 高さを定義しても、テキストはコンテナの高さを押し下げます。省略記号は表示されず、余分なテキストは切り取られます。欠落している場合、余分なテキストは切り取られます。これは、次のように text-overflow: クリップを定義するのと同じです

。上記のキーポイントの前提として、コンテナの幅を定義する必要があります。そのため、table-layout:fixed となります。は機能しますが、 table-layout: auto (table 要素のデフォルトは auto ) は機能しません。次の段落は css2.1 中国語バージョンの仕様から来ています:

'table-layout'

Value: auto fixed

Initial: auto

適用対象: 'table' および 'inline-table' 要素

継承: いいえ

パーセンテージ: N/A

メディア: Visual
計算値: 指定された値と同じ

'table-layout' 属性は、テーブルのセル、行、列のレイアウト。値の意味は次のとおりです:
fixed: 固定テーブルレイアウトアルゴリズムを使用します
auto: 任意の自動テーブルレイアウトアルゴリズムを使用します

(fixed と auto の違いは、一方が固定でもう一方が自動であることです)

以下これら 2 つのアルゴリズムについて説明します。

固定テーブルの場合レイアウトアルゴリズム (固定) では、各列の幅は次の規則によって決定されます。

width 属性値が 'auto' ではない列要素の列幅が設定されます。それ以外の場合は、最初の行の幅によって決まります。 width 属性値が 'auto' ではないセルは、列の幅を決定します。セルが複数の列にまたがる場合、幅は列全体に分割されます

残りの列はすべて、残りの水平方向の表スペース (境界線またはセル間隔を除く) に均等に分割されます

3 そういえば、残りの列はすべて、残りの水平方向の表を均等に分割します実際の状況では、テーブルは残りの列の幅を均等に分割します。text-overflow:ellipsis が機能する前提として、各列の固定幅は残りの列の数になります。コンテナーの幅を定義するには、固定が機能します

自動テーブルレイアウトアルゴリズム (固定) では、列の幅は次の手順で決定されます:

各セルの最小コンテンツ幅 (MCW) を計算します。書式設定されたコンテンツは好きなだけ行にまたがることができますが、セルから溢れることはありません。セルに指定された「幅」(W) が MCW より大きい場合、W が最小セル幅になります。「自動」値は、MCW が最小セル幅であることを意味し、各セルの「最大」幅を計算します。明示的な改行以外の改行を考慮せずにコンテンツをフォーマットします

各列について、その範囲のみから開始します列セル内の最大列幅と最小列幅を決定します。最小列幅は、最小セル幅 (または列「幅」のいずれか大きい方) の大きい方の最小必要列幅です。最大列幅は、最大セル幅 (または列「幅」のいずれか大きい方) に必要な最大列幅です。

複数の列にまたがるセルごとに、そのセルがまたがる列の最小幅を増やします。少なくともセルと同じ幅です。最大幅についても同様です。可能であれば、すべてのまたがる列の幅をほぼ同じ幅にします

「width」が「auto」ではない列グループ要素ごとに、それがまたがる列の最小幅を増やして、少なくとも列と同じ幅にします。グループの幅」は同じ幅です

実際、いくつかのことは非常に単純ですが、それについて話すと混乱します。。。

1で述べたように、セルで指定された「幅」(W)がMCWより大きい場合、Wは最小セル幅になります。「auto」値は、MCW が最小セル幅であることを示します。

**ケース 1: W > MCW の場合、W は最小セル幅です。つまり、列幅 = W、列幅はテキストに適合し、省略記号は必要ありません。

ケース 2: W **

table-layout:fixedを使わずに、つまりtable-layout:auto前提で省略記号を使いたい場合は、次のようにすれば良いです(tdに別の要素を設定し、この要素に省略記号を設定します)

<style>div {  width: 100px;
}.ellipsis {  text-overflow:ellipsis;  overflow: hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}</style>...<td>
  <div class="ellipsis">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </div></td>...

ログイン後にコピー

この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。