如何强制内联块元素正确包装它的多行子元素？

Question

我需要显示从居中文本的左右边缘填充10px的左右边框.当所有文本都适合一行时没有问题,但是当文本占用多行时,包装内联块元素会延伸到其容器宽度的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为了那个。

当文本占据多行时，包装内联块元素将拉伸到其容器宽度的 100%

这是因为内容很长，并且会在div换行到下一行之前尽可能地拉伸（直到父宽度）以容纳内容。

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

解决方案（保留divasinline-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。为了使其工作，您需要在跨度上进行填充/边距，然后浮动 s div。然后使用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>