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

Question

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

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;
}

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

When resizing my div, content falls out and i get a scrollbar to adjust the screen horizontally. (site to wide)

html

css

pseudo-element

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

When resizing my div, content falls out and i get a scrollbar to adjust the screen horizontally. (site to wide)

html

css

pseudo-element

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