How to force inline-block element to correctly wrap it's multiline child element?

Question

I need to display left and right borders padded 10px away from left and right edges of the centered text. There's no problem when the all text fits into one line, but when text takes up multiple lines the wrapping inline-block element stretches to 100% of it's container width.

I need a pure CSS solution.

Here's JSFiddle with working demo of the problem: https://jsfiddle.net/k8wrbctr/

Here's 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>

Here's 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;
}

Here's the result:

            | The title |

|      The title that takes up      |
|           multiple lines          |

And here's what I want to achieve:

            | The title |

     | The title that takes up |
     |      multiple lines     |

Answer 1

I need to display left and right borders padded 10px away from left and right edges

You need to give margins not padding for that.

when text takes up multiple lines the wrapping inline-block element stretches to 100% of it's container width

That is because the content is long and the div will stretch as far as it can (upto parent width) to accommodate the content before it wraps to the next line.

There is another problem with your div being inline-block - if the content is less then the next div will start just right after the first one and not on its own line.

Solution (Keeping the div as inline-block):

Use a pseudo-element to break the line.

* { 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>

---

Note:

Thanks @Kaiido for pointing it out. The pseudo-element trick won't work with its element being inline-block. In order for it to work, you do your padding/margin on the span, and float the divs. Then use transform trick to center it. A little more complicated.

Example:

* { 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>