内嵌块：单词被包裹，但右侧有额外的空间 [英] Inline-block: word was wrapped but extra space in the right side left

问题描述

我需要：

所以，财大字是包裹，但它留下相当宽的空间，尽管橙色div是行内块。 CSS：

  .BlockContainer {background：blue; width：400px;}。InlineBlock {display：inline-block;背景：蓝绿色; font-size：18px;行高：1.2; font-weight：700;文字转换：大写;颜色：＃f5511e; padding：2px 4px;}  

< div class = BlockContainer> < div class =InlineBlock>随着国库溢出，D k的吉比锡叮当作响。 < / div>< / div>

解决方案

如果你需要这个输出，你必须在你的单词之后使用 br 标签。默认情况下，文字会尝试占据线条的整个空间，当它不能离开空格时，它会中断：

  .BlockContainer {background：blue; width：400px;}。InlineBlock {display：inline-block;背景：蓝绿色; font-size：18px;行高：1.2; font-weight：700;文字转换：大写;颜色：＃f5511e; < p> Inline-块单独（无空格）< / p>< div class =InlineBlock>随着国库溢出，D k的吉比锡叮当作响。 < / div>< p>带有固定父宽度的嵌入块（在这种情况下，上面的文本适合空间）< / p>< div class =BlockContainer> < div class =InlineBlock>随着国库溢出，D k的吉比锡叮当作响。 < / div>< / div>< p>带有固定父宽度的内联块（没有足够的空间用于文本以便换行）< / p>< div class =BlockContainerstyle =width： 350像素;> < div class =InlineBlock>随着国库溢出，D k的吉比锡叮当作响。 < / div>< div class =BlockContainerstyle =width：350px;>< / div>< p>带有固定宽度的父级和* br *的内嵌块< / p> < div class =InlineBlock> Dumpy kibitzer叮当作< br>财政溢出。 < / div>< / div>  

I need:

I have:

So, "exchequer" word was wrapped, however it left pretty wide space in spite of orange div is inline-block. CSS:

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

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

解决方案

If you need this output you have to use br tag after your word. By default the text will try to take the whole space of the line and it will break when it cannot leaving the space you see:

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

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

这篇关于内嵌块：单词被包裹，但右侧有额外的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！