html - 调整div大小时，内容会掉落，并且我会得到一个滚动条来水平调整屏幕。 (站点宽)

您好，当我尝试调整移动设备窗口的大小时，出现了这个问题，pseude元素：after和：before（标题旁边的两行）不在站点内，并为用户创建了水平滚动条（我这样做）不想）。

我的jsfiddle：https://jsfiddle.net/cvgua1s2/1/尝试将其调整为移动大小以查看问题。

的HTML：

 <section class="slogan wow">
        <h1 class="slogantitel wow fadeIn"> Ontdek ons</h1>
    </section>

CSS：

   .slogan {
  position: relative;
  height: 30%;
  min-height:100px;
  width: 100%;
  margin-top: 100px;
}

.slogan-content {
  text-align: center;
}

h1.slogantitel {
  font-size: 4em;
  text-align: center;
  margin: 0;
  color: rgb(95,55,17);
  text-align: center;
   position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.slogantitel:before, .slogantitel:after {
    content: "";
  display: inline-block;
  width: 10%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}

.slogantitel:after {
    margin: 0 -55% 0 .5em;
}

最佳答案

尝试为overflow: hidden;添加h1.slogantitel，它将防止出现h-scrollbar。