文字溢出填充

时间:2018-05-09 12:07:41

标签: html css

当我发现问题时,我正在网站上工作。有些文字没有打破它应该的地方。文本只是忽略了填充,并在它通过整个宽度时中断。

* {
  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>

我试图让填充更大并溢出:隐藏。但这些都不起作用。

你能帮助我吗?

4 个答案:

答案 0 :(得分:0)

您可以尝试使用此代码。

&#13;
&#13;
.fw-heading .fw-special-title span {
background : #fff;
font : inherit;
padding: 0 1.5rem;
display:block;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您应该使用带有span的display:block,例如 -

<div style="width:500px;">
<h2 class="asses">
  <span>
  Mauris fermentum massa eu tortor iaculis placerat. Nulla dapibus commodo libero,
  </span>
 </h2>
 </div>
.asses span{
     background:red;
     padding:0 1.5rem;
     display:block;
 }

答案 2 :(得分:0)

尝试

display:block 

如果你有其他css,也可以添加!important(将始终应用属性)。

答案 3 :(得分:0)

display block padding而将margin更改为* { 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 { display: block; background: #fff; font: inherit; margin: .5rem 1.5rem; 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>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="https://use.fontawesome.com/6608b6cbc6.js"></script>
<div id="map_div" style="height: 400px;"></div>