内联块：单词被包裹但右侧有额外的空格

Question

我需要：

我有：

所以，＆＃34; exchequer＆＃34;单词被包裹了，但是尽管橙色div是内嵌块，它仍留有相当宽的空间。 CSS：

＆＃13;

＆＃13;

.BlockContainer{
  background: blue;  
  width: 400px;
}

.InlineBlock {
    display: inline-block;
    background: teal;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #f5511e;
    padding: 2px 4px;
}

＆＃13;

<div class="BlockContainer">
  <div class="InlineBlock">
    Dumpy kibitzer jingles as exchequer overflows.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您需要此输出，则必须在单词后面使用br标记。默认情况下，文本将尝试占据该行的整个空间，并且当它无法离开空间时它会断开：

＆＃13;

＆＃13;

.BlockContainer{
  background: blue;  
  width: 400px;
}

.InlineBlock {
    display: inline-block;
    background: teal;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #f5511e;
    padding: 2px 4px;
}

＆＃13;

<p>Inline-block alone (no spaces)</p>
<div class="InlineBlock">
    Dumpy kibitzer jingles as exchequer overflows.
  </div>

<p>Inline-block with fixed width of parent (in this case upper text fit the space)</p>
<div class="BlockContainer">
  <div class="InlineBlock">
    Dumpy kibitzer jingles as exchequer overflows.
  </div>
</div>
<p>Inline-block with fixed width of parent (no enough space for text so line break)</p>
<div class="BlockContainer" style="width:350px;">
  <div class="InlineBlock">
    Dumpy kibitzer jingles as exchequer overflows.
  </div>
</div>
<p>Inline-block with fixed width of parent and *br*</p>
<div class="BlockContainer" style="width:350px;">
  <div class="InlineBlock">
    Dumpy kibitzer jingles as<br> exchequer overflows.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;