Are there options for cropping inline-block line breaks in CSS? - css

Question

I have an interesting issue I've never encountered in css before. A client is asking if the first blue box in the image below can crop after the word "Association" instead of spanning the full width of the parent.
That's an inline-block element with width set to auto.
display: inline-block;
width: auto;
padding: .5em;
Nothing special, right? As you can see by box 2, The director of marketing has his title cropped correctly. So why is it that css chooses to display the blue background nearly the full width of the parent when the text requires more than one line?
Does anyone know of some css property that can be applied to make an inline-block element crop at the end of words? Forgive if I am failing to articulate this. I'm not really sure how to structure this question.
If it helps to know, I cannot make a special case for this item. It is a CMS based system and the job titles can be anything. Making a special case, like max-width:90% wouldn't work, especially considering mobile break points and such. We would have to write cases for anything with a long title, and specific to that title's unique set of words, so that's pretty much out of the question.
Here's a fiddle to mess with if you want to see it in action. They styles are pretty much the same, at least the important parts.
https://jsfiddle.net/4f7jj7L8/

Answer 1

If the CMS entry itself can have the line break (not a br tag but a normal linebreak), then there's a simple solution:
CSS:
.job > h5 {
white-space: pre-line;
}
HTML (Generated):
<h5>Director
of Association Management Services</h5>
Demo: https://jsfiddle.net/4f7jj7L8/4/

Answer 2

Not automatically.
The width of an inline-block is defined as
If 'width' is 'auto', the used value is the shrink-to-fit width as for
floating elements.
Calculation of the shrink-to-fit width is similar to calculating the
width of a table cell using the automatic table layout algorithm.
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by trying all
possible line breaks. CSS 2.1 does not define the exact algorithm.
Thirdly, find the available width: in this case, this is the width of
the containing block minus the used values of 'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the widths of any relevant
scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).
If the text is long enough, the preferred width will be greater than the available width. So the inline-block will fill all the available width.
However, you can avoid that inserting explicit line breaks (e.g. <br />) at the desired places.
.job {
width: 45%;
float: left;
margin-right: 2%;
}
.image {
width: 100%;
height: 100px;
background: #000;
}
h2 {
font-size: 1.2em;
}
h5 {
display: inline-block;
padding: .5em;
font-size: 1em;
background: #ff0000;
}
p {
margin-top: 1em;
}
<div class="job">
<div class="image"></div>
<h2>Some Name</h2>
<h5>Director<br />of<br />Association<br />Management<br />Services</h5>
<p>Lorem ipsum dolor set amit</p>
</div>
<div class="job">
<div class="image"></div>
<h2>Some Name</h2>
<h5>Director of Sales</h5>
<p>Lorem ipsum dolor set amit</p>
</div>

Answer 3

Yes, it is possible — the highlight effect can be cleverly emulated using a mix of:
Declaring the element as inline, so it collapses to content width
Using a combination of box shadows to cover all four edges
Using relative positioning and a left offset to compensate for extra space taken up by the box shadow
Here's the minimal CSS that works:
h5{
display:inline;
font-size:1em;
line-height: 1.75em;
position: relative;
left: .5em;
background:#ff0000;
box-shadow: 0 -.25em 0 .5em #ff0000,
0 .25em 0 .5em #ff0000,
.25em 0 0 .25em #ff0000,
-.25em 0 0 .25em #ff0000;
}
And it looks like this on Chrome v41, OS X 10.10.3:
See fiddle here: https://jsfiddle.net/teddyrised/4f7jj7L8/2/