2

私のCSS：

        .reviewRow 
        {    
            clear:both;
            padding-top:0;
            margin-top:0;
        }
        .reviewBlock 
        {
         float:left;
         height:100%;
         padding-top:0;
         margin-top:0;
         border-top: 1px solid #444; 
         border-left: 1px solid #444;
        }
        .reviewCaption
         {
             font: normal normal normal 6pt verdana;padding-left:0.03in;
         }
        .reviewText 
        {
            font: normal normal normal 8pt verdana;  
            height:20px; 
        }

私のHTML：

<body>
<div style="HEIGHT: 30px" class=reviewRow>
    <div style="WIDTH: 125px" class=reviewBlock>
        <div id=reviewBeneficiaryType class=reviewText>This text is too big to fit inside a 30px height cell, so I want it to get bigger.
        </div>
    </div>
</div>
</body>

上記のHTMLは、問題のあるWebページから除外されています。動的に生成されるため、内部のテキストは短い場合と長い場合があります。通常、テキストが大きすぎる場合を除いて、これによりテキストが内部にある高さ30ピクセルのボックスがレンダリングされると予想されます。大きすぎる場合、ボックスはテキストに合わせて拡張されます。

問題は、このHTMLが別のページに表示されると、テキストがボックスから「こぼれる」ことです。何が問題なのかわかりません。さらに複雑なことに、「高さ」スタイルを削除すると、実際にはボックスの高さが高くなります。

MDNドキュメントを見てきました。デフォルトでは、CSSの「オーバーフロー」の値は「表示」であることが明確に示されています。この場合、テキストは「こぼれる可能性があります」ですが、どのような状況でもスクロールバーを表示したくありません。

含まれている要素の「位置」CSSを変更しようとしましたが、何も実行されないようです。

ここで問題を引き起こしている可能性があるのは何ですか？

更新問題の原因と思われるものを見つけました！これはDoctype宣言です！これを抜粋したページからdoctype宣言を削除すると、正常にレンダリングされます。なぜですか？

4

4 に答える 4

2

に与えるようmin-height:20px;max-height:400px;にしてください.reviewText

于 2012-12-11T18:44:32.107 に答える
1

divに高さを指定しています。テキストがより明確になると、ボトル入り飲料水ができないようにコンテナからこぼれます。小さなサイズのグラスに注ぐことがoverflow: scroll;できないため、どちらも使用したくない必要があります。あなたはheight: auto;それが含むテキストに応じてボックスサイズを大きくするあなたを作る必要がmin-height: 30px;あります..ここに要素を配置することはあなたを助けません..あなたはスクロールを望まない、あなたはあなたのコンテナを自動にする必要はありません-実際に必要なサイズよりもサイズが変更されていますか？

そして、あなたがあなたのテキストを次のようなものにしたいのなら

------------------------------------------
| This is a pretty long long long long...|
------------------------------------------

これを試すより

text-overflow:ellipsis;
于 2012-12-11T18:36:32.280 に答える
1

通常、normalise.cssまたはreset.cssが表示される場合は、html要素の高さを100％に設定します。同じことを行うとうまくいきます。

html{
height:100% /* auto will also do */
}

http://jsfiddle.net/SwCKU/ ..このフィドルを確認してください。

于 2012-12-11T18:39:12.683 に答える
0

問題は、ページの1つにDOCTYPE宣言がないことです。両方のページで同じDOCTYPE宣言を使用すると、CSSはまったく同じように解釈されるように見えます。

CSSを正しく作成する方法については、さらにサポートが必要な場合は別の質問になります。

助けてくれてありがとう！私は受け取ったすべての回答に賛成しました。

于 2012-12-12T14:46:10.873 に答える