CSS div溢出问题的最佳解决方案是什么？

Question

有一个盒子，里面有公告。但是该公告使它开箱即用。我该怎么办？我使用字幕。

HTML

<div class="vertical-marquee right-page hidden-xs">
    <div style="position: absolute;">
        <p style="font-size: 30px; color: #d6750a;" v-for="announcement in announcements">{{ announcement }}</p>
    </div>
</div>

CSS

.right-page {
  position: relative;
  padding: 5px;
  border-radius: 15px;
  border: 2px #588db7 solid;
  margin-top: 183px;
  margin-right: -190px;
  float: right;
  width: 400px;
  height: 600px;
}

Answer 1

尝试下面的代码，看看它是否适合您。

.right-page {
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 15px;
    border: 2px #588db7 solid;
    float: right;
    width: 400px;
    height: 400px;
}

body{
    display: flex;
    align-items: center;
    resize: both;
    }

<div class="vertical-marquee right-page hidden-xs">
    <div style="position: absolute;">
        <p style="font-size: 30px; color: #d6750a;" v-for="announcement in announcements">There is a box and there are announcements in it. But the announcement carries it out of the box. What can I do for it? I use Marquee.</p>
    </div>
</div>

Answer 2

您可以使用溢出：隐藏；为此

.right-page {
  overflow: hidden;
  position: relative;
  padding: 5px;
  border-radius: 15px;
  border: 2px #588db7 solid;
  margin-top: 183px;
  margin-right: -190px;
  float: right;
  width: 400px;
  height: 600px;
}