Question

所以我有一个简单的div，其中有一个带一些文本的p。我希望文本保留在div内，到目前为止一切正常，但是当我水平调整浏览器窗口的大小时，div内的文本会从底部的div中流出。

#textbox {
  position: absolute;
  left: 180px;
  top: 420px;
  height: 250px;
  width: 20%;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

#text {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-size: 20px;
  word-wrap: break-word;
}

<div id="textbox">
  <p id="text">Here is some example text that is about the same amount as I really have here, but I don't want to reveal what.</p>
</div>

根据类似问题的答案，我必须添加已经拥有的word-wrap: break-word;。如果这有帮助，则文本不会在左侧或右侧流出，而在底部流出。

所以我的问题是，在移动浏览器窗口时如何将文本保留在div中？

Answer 1

您可以通过简单地更改样式来保留文本。

在线演示：https://jsfiddle.net/y5sjdtoq/

尝试以下样式代码：

    #textbox {
        left: 180px;
        top: 420px;
        height: auto;
        padding: 20px;
        display: inline-block;
        width: 240px;
        background-color: white;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    #text {
      text-align: center;
      font-family: 'Roboto', sans-serif;
      font-style: italic;
      font-size: 20px;
      word-wrap: break-word;
    }

Answer 2

只需将height: 250px替换为min-height: 250px;

#textbox {
  position: absolute;
  left: 180px;
  top: 420px;
  min-height: 250px;
  width: 20%;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

#text {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-size: 20px;
  word-wrap: break-word;
}

<div id="textbox">
  <p id="text">Here is some example text that is about the same amount as I really have here, but I don't want to reveal what.</p>
</div>

调整浏览器窗口大小时如何在div中保留文本

2 个答案: