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 不属于我遇到问题的网页。它是动态生成的，所以里面的文字可能很短也可能很长。通常，我希望这将呈现一个 30 像素高的框，其中包含文本，除非文本太大，在这种情况下，框将扩展以适应文本。

问题是当这个 HTML 出现在另一个页面中时，文本会“溢出”框。我不明白问题是什么。更复杂的是，如果我删除“高度”样式，它实际上会使盒子更高。

我查看了MDN 文档。它清楚地表明默认情况下，CSS“溢出”的值是“可见的”，在这种情况下，文本“可能溢出”，但在任何情况下我都不希望出现滚动条。

我已经尝试修改包含元素的“位置”CSS，但这似乎没有任何作用。

什么可能导致这里的问题？

更新我发现似乎是什么导致了问题！这是文档类型声明！如果我从摘录的页面中删除 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

我发现问题在于其中一页缺少 DOCTYPE 声明。如果我在两个页面上使用相同的 DOCTYPE 声明，那么 CSS 的解释方式似乎完全相同。

至于如何正确地编写 CSS，如果我需要进一步的帮助，那将是一个单独的问题。

谢谢您的帮助！我对收到的所有答案都投了赞成票。

于 2012-12-12T14:46:10.873 回答