删除元素而不会超出元素

Question

我想在元素的左侧和右侧绘制直到其父元素边缘的线条。

我不确定我怎么能这样描述，但也许截图可以解决这个问题：

正如你所看到的，这接近完美，如果我把

overflow: hidden;

在标题上，然后它甚至更好，但后来我看不到我漂亮的圆角（截图中的红色圆圈部分），因为它随后被切断了。

目前，这是我的HTML：

<div id="IntroPage" class="introPage">
    <div class="test">Heading</div>
</div>

“introPage”是你看到的灰色部分。

我的CSS：

.introPage {
    position: relative;
    max-width: 1000px;
    margin: auto;
    padding-top: 50px;
    height: 100%;
    background: gray;
}

.test {
    position: relative;
    /* overflow: hidden; */
    text-align: center;
}

.test:before,
.test:after {
    content: "";
    position: relative;
    background: #0099FF;
    height: 6px;
    display: inline-block;
    width: 50%;
    border-radius: 2px;
}

.test:before {
    right: 10px;
    margin-left: -50%;
}

.test:after {
    left: 10px;
    margin-right: -50%;
}

任何人都有更好的解决方案吗？

提前Thanx！

Answer 1

<style>
    h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; } 
    h2 span { background:#fff; padding:0 10px; }
</style>

<h2><span>THIS IS A TEST</span></h2>

here in this fork

Answer 2

这里快速Fiddle 对不起，我不得不使用2个div作为蓝色线条，以便他们配合混合布局：适用于现代浏览器的flexbox和用于后备的显示表。

HTML

<div id="IntroPage" class="introPage flexBox">
    <div class='line'></div>
    <div class="test">
        Heading
    </div>
    <div class='line'></div> 
</div>

CSS

    body {
    background: grey;
}
.introPage {
    position: relative;
    width: 100%;
    max-width: 100vw;
    padding-top: 3em;
    height: 100%;
    background: gray;
    display: table-row;
}
.test {
    position: relative;
    text-align: center;
    width: 20%;
    min-width: 1.5em;
    display: table-cell;
    font-variant: small-caps;
    font-weight: 700;
    font-size: 2em;
    line-height: 2.5em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 20%;
}
.line {
    position: relative;
    background: #0099FF;
    height: .4em;
    border-radius: 2px;
    display: table-cell;
    height: 6px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 39%;
}

.flexBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

Answer 3

快速而肮脏的方法是将元素前后测试的宽度设置为较小的宽度（比如说可能是40％而不是50％）。

.introPage {
    position: relative;
    max-width: 1000px;
    margin: auto;
    padding-top: 50px;
    height: 100%;
    background: gray;
}

.test {
    position: relative;
    /* overflow: hidden; */
    text-align: center;
}

.test:before,
.test:after {
    content: "";
    position: relative;
    background: #0099FF;
    height: 6px;
    display: inline-block;
    width: 40%;
    border-radius: 2px;
}

.test:before {
    right: 10px;
}

.test:after {
    left: 10px;
}

<div id="IntroPage" class="introPage">
    <div class="test">Heading</div>
</div>

最佳案例解决方案是根据“test”类的宽度重新调整元素前后的测试大小。我不太确定在css中这是可能的，你可能不得不使用javascript根据测试元素的大小调整这些元素的宽度。

此过程的基本概要是计算文本的宽度，将其从像素转换为百分比，然后从100％中减去该百分比，然后除以2.

如果有人想从这里捡到它，可以稍后给我一点时间，如果有人想从这里拿起它，可以随意编辑帖子（社区维基风格）。

Answer 4

我想我有一个答案......适用于任何页面宽度。

http://codepen.io/anon/pen/ZGxNgB

<div id="IntroPage" class="introPage">
    <div class="test">Heading</div>
</div>

.introPage {
    position: relative;
    max-width: 1000px;
    margin: auto;
    padding-top: 50px;
    height: 100%;
    background: gray;
}

.test {
    position: relative;
    /* overflow: hidden; */
    text-align: center;
  width:100%;
  display:block;
  height:30px;

}

.test:before,
.test:after {
    content: "";
    position: absolute;
    background: #0099FF;
    height: 6px;
    display: inline-block;
    width: 40px;
    border-radius: 2px;
  top:12px;
}

.test:before {
    float:right;
  right:-40px;
  pos

}

.test:after {
   float:left;
  left:-40px;

}