Question

我之前在css中遇到过一个有趣的问题。客户询问下图中的第一个蓝框是否可以在单词＆＃34;＆＃34;而不是跨越父母的整个宽度。

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

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

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

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

enter image description here

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

如果你想看到它的实际效果，这里有一个混乱的小提琴。它们的风格几乎相同，至少是重要的部分。 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/

Answer 2

不自动。

width of an inline-block定义为

如果＆＃39;宽度＆＃39;是＆＃39; auto＆＃39;，使用的值是shrink-to-fit宽度   浮动元素。

收缩 - 拟合宽度的计算类似于计算   使用自动表格布局算法的表格单元格的宽度。   粗略地：通过格式化内容来计算首选宽度   除了发生显式换行之外没有断行，   并且还计算优选的最小宽度，例如，通过尝试所有   可能的换行符。 CSS 2.1没有定义确切的算法。   第三，找到可用宽度：在这种情况下，这是宽度   包含的块减去＆margin-left＆＃39;的使用值，   ＆＃39; border-left-width＆＃39;，＆＃39; padding-left＆＃39;，＆＃39; padding-right＆＃39;，   ＆＃39; border-right-width＆＃39;，＆＃39; margin-right＆＃39;，以及任何相关的宽度   滚动条。

然后收缩配合宽度为：min（max（首选最小宽度，   可用宽度），首选宽度）。

如果文字足够长，首选宽度将大于可用宽度。因此，内联块将填充所有可用宽度。

但是，您可以避免在所需位置插入明确的换行符（例如<br />）。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

是的，有可能 - 可以使用以下内容巧妙地模拟高亮效果：

将元素声明为inline，因此它会折叠为内容宽度
使用框阴影组合覆盖所有四条边
使用相对定位和左偏移来补偿框阴影占用的额外空间

这是最小的CSS：

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;
}

在Chrome v41，OS X 10.10.3上看起来像这样：

Result

请参阅此处的小提琴：https://jsfiddle.net/teddyrised/4f7jj7L8/2/

是否有选项可以在CSS中裁剪内联块换行符？

3 个答案: