调整我的 div 大小时，内容会掉落，我得到一个滚动条来水平调整屏幕.(网站到广泛)

Question

您好，当我尝试为移动设备调整窗口大小时，我遇到了这个问题，pseude 元素 ：after 和 ：before（我的标题旁边的 2 行）从网站中掉出来并为用户创建一个水平滚动条（我不想要）。

我的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滚动条出现。

Answer 2

尝试 overflow：hidden; 对于 h1 标签。

.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);
  overflow: hidden;
  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;
}

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

Answer 3

最好的解决方案是减少移动设备中的字体，因为它将完全适合移动设备。

h1.slogantitel {
    font-size: 1em;
}