Question

我的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 documentation。它清楚地表明，默认情况下，CSS“溢出”的值是“可见的”，在这种情况下，文本“可能会溢出”，但在任何情况下我都不希望出现滚动条。

我尝试修改包含元素的“位置”CSS，但似乎没有做任何事情。

这可能导致什么问题？

更新我找到了导致问题的原因！这是doctype声明！如果我从页面中删除了这个摘录的doctype声明，它将呈现正常！为什么？

Answer 1

尝试将min-height:20px;max-height:400px;提交给.reviewText

Answer 2

你指定你的div的高度，如果文字明显变得明显，它会像一瓶水一样从容器中溢出;倒入一个小尺寸的玻璃，所以你需要overflow: scroll;您不想使用任何一个height: auto;来增加相应于min-height: 30px;所包含文本的框尺寸。在此处定位元素对您没有帮助..您不需要滚动，您不需要自动调整容器的大小而不是实际需要的容量吗？

如果你想让你的文字像

那样

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

比试试这个

text-overflow:ellipsis;

Answer 3

如果您经常看到 normalise.css 或 reset.css ，则会将html元素的高度设置为100％。执行相同操作即可。

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

http://jsfiddle.net/SwCKU/ ..检查这个小提琴。

Answer 4

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

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

感谢您的帮助！我已经收到了我收到的所有答案。

我无法使用CSS正确设置HTML元素的高度

4 个答案: