0

問題: あるタイプの埋め込みスタイルでは「overflow:hidden」が正常に機能し、別のタイプの埋め込みスタイルでは機能しません。

これがCSSDeskコードです (この記事の執筆時点では、jsfiddle は機能していません)。

背景: 私のプロジェクトでは、巨大なテーブルを使用して、データベースからの変数を表示する必要があります。ページあたり最大 75 の変数です。div のみを使用して最善を尽くしましたが、20 時間を無駄にし、最終的にテーブルに戻りました (CSS 純粋主義者の皆様、申し訳ありません)。

一部の td では、データが少し長く、「非表示」にする必要があります (データは単なる「プレビュー」であるため、この特定のケースでは問題になりません)。私は Web を検索し、「非表示」を使用できる唯一のスタイリング要素が div であるという実験を行いました (実験で tds と spans を試しましたが、機能しません)。

1 つの td で、1 つの変数を左側に配置し、別の変数を右側に配置したいと考えています。ほとんどの場合、両方とも td に収まりますが、非常に長い変数では、右側の変数の一部を切り取っても問題ありません。 . そこで、CSS と html を記述し、div のスタイルを設定して、基準を満たすようにします。これらは、上記の CSSDesk ページの上位 2 つの td です。すべて正常に動作します。

しかし！ここ数か月で、要素識別子の「クラス」部分で複数のスタイルを「混合」できることを学びました (たとえば<td class="redcolor blueunderline">)、多くの場合、ページ上で唯一の要素であり、埋め込みスタイル全体を書き直し/追加するか、スタイル シートを変更する必要があります (たとえば、名前、住所、電話番号、zip などで、名前だけを「太字」にしたい - class="identifers" vs class="identifiers bold") - あなたの専門家はそのようなことをしたことがありますか?

だから私は少し遊んで、「overflow:hidden」を除いてほとんどの作業をしました。

CSSDesk の例の左上の div には、次の CSS と html を使用します (うまく機能します)。

.leftdivclass {
   float:left;
   background-color:green;
   color:black;   
   border:2px solid yellow;   
   overflow:hidden;
   white-space:nowrap;
   width:25%;}
<td><div class="leftdivclass" >Upper Left 123456789</div>

CSSDesk の例の右上の div には、次の CSS と html を使用します (うまく機能します)。

.rightdivclass {
   float:right;
   background-color:red;
   color:black;
   border:2px solid yellow;
   overflow:hidden;
   white-space:nowrap;
   width:25%;}
<div class="rightdivclass" >Upper Right 123456789</div></td>

CSSDesk の例の左下の div には、この CSS と html を使用します (「非表示」以外はすべて機能します - 数字が突き出ていることに注意してください)。

.floatleft {
    float:left;}
.bgblue {
    background-color:blue;}
.bgred {
    background-color:red;}
.lcwhite {
    color:white;}
.lcblack {
    color:black;}
.border2y {
    border:2px solid yellow;}       
overflowhidden {
    overflow:hidden;}
.wsnowrap {
    white-space:nowrap;}
.width25pc {
    width:25%;}
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div>

しかし、同じ html を使用して "style="overflow:hidden" を追加すると、CSSDesk の例の右下の例のように、すべて正常に動作します。

<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td>

質問:

  1. 「overflow:hidden」を含む 1 つの埋め込み CSS スタイルが機能するのに、クラス コマンドへの 1 つの追加に解析されると機能しないのはなぜですか? "style="overflow:hidden" - inline を追加すると、なぜ機能するのでしょうか?

  2. あなたの専門家は、このような小さな「クラス スニペット」を使用したことがありますか?

改めまして、よろしくお願いいたします。

4

1 に答える 1

0

これらのクラスを組み合わせることができます。冗長性を節約できれば、素晴らしいことです。クラスとコンテナ クラス (つまり、それらが内部にある親) を混同すると、問題のデバッグが難しくなります。

親または別のクラスがオーバーフロー プロパティと競合しているため、機能していない可能性があります。style="overflow:hidden;"ほとんどの場合、インライン スタイルの優先度が最も高くなりoverflowますが、デフォルトのプロパティは次のとおりです。visible.

2 つのクラス (1 つは has ともう 1 つは ) を呼び出すoverflow:hidden;とoverflow:visible;、目的の効果が得られない可能性があります。

このようなセレクターも覚えておいてください

#divid .divclass

必ず勝ちます

.divclass

より優先的に扱われます。

また、試してみましたか

overflow:hidden !important;

すべてに優先する傾向があります。それが役立つことを願っています。

于 2013-09-23T03:04:53.667 に答える