当我发现问题时,我正在网站上工作。有些文字没有打破它应该的地方。文本只是忽略了填充,并在它通过整个宽度时中断。
* {
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>
我试图让填充更大并溢出:隐藏。但这些都不起作用。
你能帮助我吗?
答案 0 :(得分:0)
您可以尝试使用此代码。
.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;
答案 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&sensor=false"></script>
<script src="https://use.fontawesome.com/6608b6cbc6.js"></script>
<div id="map_div" style="height: 400px;"></div>