换行时设置盒子边框，仅保留上下边框去除中间边框的实现方案

需求 #

文本换行时为元素设置边框，仅保留整体的上下边框，去除换行产生的中间重复边框。

现有代码 #

HTML #

<div class="pop-new-left content-wrapper" style="background-color:#69b3e7">
    <h1 class="staff-vol-name">Mukesh Khatri</h1>
    <h2 class="staff-vol-occu"></h2>
    <div class="clear"></div>
    <span class="staff-vol-nation">India India</span>
    <span class="staff-vol-country">, Resident in New Delhi West</span>
    <div class="clear"></div>
</div>

CSS #

.pop-new-left span {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 10px 0px;
    box-sizing: content-box;
 }

当前问题 #

两个<span>元素换行后，各自的上下边框叠加，导致中间出现一条重复的白色边框线。

解决方案 #

方案一：相邻兄弟选择器快速修复 #

通过CSS相邻兄弟选择器，移除第二个<span>的上边框，避免中间重复：

.pop-new-left span {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 10px 0px;
    box-sizing: content-box;
}
/* 去掉第二个span的上边框 */
.pop-new-left span + span {
    border-top: none;
}

方案二：容器包裹统一设置边框（更健壮） #

修改HTML结构，将两个<span>放入同一个容器中，给容器设置上下边框，内部元素不再单独添加边框：

修改后的HTML

<div class="pop-new-left content-wrapper" style="background-color:#69b3e7">
    <h1 class="staff-vol-name">Mukesh Khatri</h1>
    <h2 class="staff-vol-occu"></h2>
    <div class="clear"></div>
    <!-- 新增容器包裹文本元素 -->
    <div class="info-container">
        <span class="staff-vol-nation">India India</span>
        <span class="staff-vol-country">, Resident in New Delhi West</span>
    </div>
    <div class="clear"></div>
</div>

修改后的CSS

.pop-new-left .info-container {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 10px 0;
}
.pop-new-left .info-container span {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    box-sizing: content-box;
}

说明 #

• 方案一适合固定两个<span>的场景，代码改动量小；
• 方案二更灵活，后续新增文本元素时，仍能保持整体仅有上下边框，推荐使用。

内容的提问来源于stack exchange，提问作者Mukesh Khatri