是否有选项可以在CSS中裁剪内联块换行符？(Are there options for cropping inline

是否有选项可以在CSS中裁剪内联块换行符？(Are there options for cropping inline-block line breaks in CSS?)

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

这是一个宽度设置为auto的内联块元素。

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

没什么特别的吧？ 正如您在第2栏中所看到的，市场营销总监正确地裁剪了他的头衔。 那么，当文本需要多行时，为什么css选择显示父级的全宽度的蓝色背景呢？

有没有人知道一些css属性可以应用于在单词结尾处进行内联块元素裁剪？ 如果我没有说清楚这一点，请原谅。 我不确定如何构建这个问题。

如果知道有帮助，我不能为这个项目做一个特例。 它是一个基于CMS的系统，职称可以是任何东西。 制作一个特殊情况，例如max-width:90%是行不通的，特别是考虑到移动断点等。 我们必须为具有长标题的任何东西编写案例，并且特定于该标题的独特单词集，因此这几乎是不可能的。

如果你想看到它在行动，这是一个混乱的小提琴。 它们的风格几乎相同，至少是重要的部分。 https://jsfiddle.net/4f7jj7L8/

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/

最满意答案

如果 CMS条目本身可以有换行符（不是br标签，而是正常的换行符），那么有一个简单的解决方案：

CSS：

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

HTML（生成）：

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

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

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/