如何强制 inline-block 元素正确包装它的多行子元素？

Question

我需要显示从居中文本的左右边缘填充 10 像素的左右边框。当所有文本都放入一行时没有问题，但是当文本占据多行时，环绕的 inline-block 元素会拉伸到其容器宽度的 100%。

我需要一个纯 CSS 解决方案。

这是 JSFiddle 与问题的工作演示：https://jsfiddle.net/k8wrbctr/

这是 HTML：

<div class="container">
<div class="borders-wrapper"><span>The title</span></div>
<div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>

这是 CSS：

.container {

    width: 200px;
    text-align: center;
    background-color: #ddd;
}

.borders-wrapper {

    display: inline-block;
    border-left: 2px solid black;
    border-right: 2px solid black;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

结果如下：

            | The title |

|      The title that takes up      |
|           multiple lines          |

这就是我想要实现的目标：

            | The title |

     | The title that takes up |
     |      multiple lines     |

Answer 1

我需要显示从左边填充 10px 的左右边框 和右边缘

您需要为此提供margins 而不是padding。

当文本占据多行时，换行 inline-block 元素 延伸到其容器宽度的 100%

这是因为内容很长，div 将尽可能地拉伸（直到父宽度）以容纳内容，然后再换行到下一行。

您的div 是inline-block 还有另一个问题 - 如果内容较少，则下一个div 将在第一个之后开始，而不是在自己的行上。

解决方案（将div 保留为inline-block）：

使用伪元素换行。

* { box-sizing: border-box; }
.container {
    width: 200px;
    text-align: center;
    background-color: #ddd;
}
.borders-wrapper {
    display: inline-block;
    border-left: 2px solid black;
    border-right: 2px solid black;
    padding: 0px 10px; margin: 10px;
}
.borders-wrapper::after {
    content:"\A"; white-space:pre;
}

<div class="container">
    <div class="borders-wrapper"><span>The title</span></div>
    <div class="borders-wrapper"><span>The title that</span></div>
    <div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>

---

注意：

感谢@Kaiido 指出。伪元素技巧不适用于其元素为inline-block。为了让它工作，你在跨度上做你的填充/边距，并浮动divs。然后使用transform 技巧将其居中。稍微复杂一点。

示例：

* { box-sizing: border-box; }
.container {
    width: 200px; 
    text-align: center;
    background-color: #ddd;
}
.borders-wrapper {
    float: left; clear: left;
    position: relative; left: 50%;
    transform: translateX(-50%);
    margin: 0px auto;
}
.borders-wrapper > span {
    display: inline-block; 
    padding: 0px 10px; margin: 10px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.container:after { content:''; display:block; clear: both; }
.div2 { width: 400px; }

<div class="container">
    <div class="borders-wrapper"><span>The title</span></div>
    <div class="borders-wrapper"><span>The title that</span></div>
    <div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>
<br />
<div class="container div2">
    <div class="borders-wrapper"><span>The title</span></div>
    <div class="borders-wrapper"><span>The title that</span></div>
    <div class="borders-wrapper"><span>The really long title that takes up multiple lines in a large width</span></div>
</div>