html - 文本溢出填充

Question

当我发现一个问题时，我正在处理一个网站。一些文本没有在它应该的地方中断。当文本超过整个宽度时，文本将忽略填充和中断。

* {
  box-sizing: border-box;
}

.fw-heading.fw-heading-center {
  text-align: center;
}

.fw-heading {
  margin-bottom: 1em;
}

.fw-heading .fw-special-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  font-weight: 200;
}

.fw-heading .fw-special-title::before {
  border-bottom: 2px solid #002e50;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}

.fw-heading .fw-special-title span {
  background: #fff;
  font: inherit;
  padding: .5rem 1.5rem;
}

h2 {
  font-size: 2rem;
}

<div class="fw-heading fw-heading-h2 fw-heading-center">
  <h2 class="fw-special-title"><span>"Ons meubilair is extreem licht, oersterk en afgestemd op ergonomische houdingen."</span>
  </h2>
</div>

我试图让 padding 变大并 overflow: hidden。但这些都不起作用。

你能帮帮我吗？

Answer 1

你可以试试这段代码。

.fw-heading .fw-special-title span {
background : #fff;
font : inherit;
padding: 0 1.5rem;
display:block;
}

<div class="fw-heading">
<h2 class="fw-special-title">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, molestias, enim! Beatae cumque, eum amet vero nihil accusantium labore? Soluta quos perspiciatis eius aut, nulla, expedita eveniet necessitatibus aperiam assumenda!</span>
</h2>
</div>