css - 在 CSS 中是否有裁剪内联 block 换行符的选项？

Question

我有一个以前从未在 css 中遇到过的有趣问题。一位客户询问下图中的第一个蓝色框是否可以在“Association”一词之后裁剪，而不是跨越父级的整个宽度。

这是一个宽度设置为自动的行内 block 元素。

display: inline-block;
width: auto;
padding: .5em;

没什么特别的，对吧？正如您在方框 2 中看到的那样，营销总监的头衔被正确裁剪了。那么，当文本需要多行时，为什么 css 选择将蓝色背景显示为接近父级的整个宽度？

有谁知道可以应用一些 css 属性来在单词末尾制作行内 block 元素裁剪？如果我没有表达清楚，请原谅。我不太确定如何组织这个问题。

如果有帮助的话，我不能为这个元素做一个特例。这是一个基于 CMS 的系统，职位可以是任何东西。做一个特殊情况，比如 max-width:90% 是行不通的，尤其是考虑到移动断点等。我们必须为任何标题较长且特定于该标题的独特单词集的内容编写案例，所以这几乎是不可能的。

如果你想看到它的实际效果，这里有一个 fiddle 可以搞砸。他们的风格几乎一样，至少重要的部分是一样的。 https://jsfiddle.net/4f7jj7L8/

Answer 1

如果 CMS 条目本身可以有换行符(不是 br 标记而是普通换行符)，那么有一个简单的解决方案:

CSS:

.job > h5 {
    white-space: pre-line;
}

HTML(生成):

     <h5>Director 
of Association Management Services</h5>

演示:https://jsfiddle.net/4f7jj7L8/4/