Question

我的<div>里面有一个<p>，但有时候我的<p>里面的文字太多了，它会从它下面的div中消失。

<div style="width: 100px'; height='100px';">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula consequat tortor, a posuere mi tristique vel. Suspendisse vitae interdum nunc. Vivamus in suscipit arcu, vitae placerat leo. Nulla placerat elit in justo pellentesque, at tincidunt dolor facilisis. Pellentesque maximus leo a nisi varius tempus. Etiam nulla nulla, tempus eget accumsan nec, tincidunt pulvinar erat. Cras massa orci, finibus nec neque auctor, faucibus maximus felis. Sed ac nulla sit amet lacus auctor fringilla. Sed ultricies risus leo, a pulvinar mi posuere vel. Suspendisse potenti. Curabitur ultrices est      risus, sed blandit turpis lobortis ac.
 </p>
</div>

JsFiddle：http://jsfiddle.net/fksdq1b0/

有没有一种简单的方法可以解决这个问题，所以p会在比div大的时候停止？

谢谢！

Answer 1

将overflow: hidden;添加到div。

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
}

Demo Here

使用scroll。

的示例

    overflow: scroll;

Demo Here

使用auto。

的示例

    overflow: auto;

Here is a demo with overflowing content

Here is a demo without overflowing content

详细了解overflow here

<强>可见

默认值。内容未被剪裁，可以在内容框外呈现。隐剪辑内容并且不提供滚动条。

<强>滚动

内容被剪裁，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能会打印溢出的内容。

自动

取决于用户代理。如果内容溢出，Firefox等桌面浏览器会提供滚动条。

取自developer.mozilla.org

Answer 2

如果您仍希望用户看到内容，请尝试overflow:auto live DEMO

div{
    width: 100px;
    max-height: 100px;
    overflow:auto;/**if not use  overflow:hidden*/
    border: 1px solid black;
}

Answer 3

正如其他答案所述，请使用

overflow:hidden;

但是，如果您不想完全隐藏此内容，可以选择滚动它。简单地使用

overflow:auto;

即使它不需要它们，也会给你水平和垂直滚动条。

相反，要获得水平滚动功能，请使用

overflow-x:scroll;

或垂直滚动使用

overflow-y:scroll;

我还没有附加一个JSFiddle，因为你已经有几个这样的了，但是在这里看看有关CSS溢出的更多信息：

Answer 4

你要么必须使用overflow：hidden（隐藏在父div之外“溢出”的所有东西，或者overflow-x：scroll（为你的文本添加一个水平滚动条）或者溢出-y：scroll;添加用于文字的垂直滚动条。

警告：溢出：隐藏;将隐藏溢出的文本并使其无法使用。

如果<p>大于</p> <div> </div>，则隐藏<p>的一部分

4 个答案: