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

Question

你好，当我尝试为移动设备调整窗口大小时，我遇到了这个问题，伪元素 :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;
}

Answer 1

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