Question

我目前正在建立一个网站，但遇到一个我根本不了解的问题。我在div中有一个元素。带文字。由于某种原因，当我调整浏览器大小时，文本会展开并移开其内部的位置。

以下是我想要的屏幕截图。即使当我调整浏览器大小时： https://gyazo.com/c972cdaf5cc3ed1fde14f49f7e7e9a7c

这是我调整窗口大小时的样子： https://gyazo.com/4ab18f515cca72c7490e8316c6ee9912

这是HTML代码：

<div class="bgBox1Main">
    <h1 class="bgBox1Title">RANK <br>BOOSTING</h1>
    <h1 class="bgBox1Click" onclick="goTo('rankboosting.php')">CLICK TO VIEW</h1>
    <div class="bgBox1" ></div>
    <p class="bgBox1Text">Get a proffessional booster to push you up to the ranks you want! Play with him or let him do the job alone.</p>
</div>

这是CSS代码：

.bgBox1{
    position: absolute;
    top: 54%;
    left: 30%;
    transform: translate(-50%, -50%);
    height: 24vw;
    width: 17vw;
    background-color: #778beb;
    color: white;
    border: solid 1px white;
}


.bgBox1Text{
    z-index: 5;
    position: absolute;
    top: 53%;
    left: 30%;
    transform: translate(-50%, -50%);
    height: 12vw;
    width: 15vw;
    color: white;
    font-size: 1vw;
    max-height: 12vw;
    overflow: auto;
}

.bgBox1Title{
    text-align: center;
    z-index: 5;
    position: absolute;
    top: 56%;
    left: 30%;
    transform: translate(-50%, -50%);
    height: 25vw;
    width: 20vw;
    color: white;
    font-size: 1.3vw;
}

Answer 1

将这些规则添加到.bgBox1Text：

.bgBox1Text {
    text-align: justify;
    word-break: break-word; /* optionally */
}

希望我进一步推动了你。

Answer 2

尝试一下：

.bgBox1Main{
  position: relative;
  height: 24vw;
  width: 17vw;
  background-color:black;
}
.bgBox1{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    width: 100%;
    padding: 1vw;
    background-color: #778beb;
    color: white;
    border: solid 1px white;
    text-align: center;
}

.bgBox1Title{
    font-size: 1.3vw;
}

.bgBox1Text{
    font-size: 1vw;
    flex-grow:1;
}


.bgBox1Click{
    font-size: 1.3vw;
}

<div class="bgBox1Main">
  <div class="bgBox1" >
      <h1 class="bgBox1Title">RANK <br>BOOSTING</h1>
      <p class="bgBox1Text">Get a proffessional booster to push you up to the ranks you want! Play with him or let him do the job alone.</p>
      <h1 class="bgBox1Click" onclick="goTo('rankboosting.php')">CLICK TO VIEW</h1>  
  </div>
</div>

为什么文本不跟随其内部的div？

2 个答案: