CSS或JS - 删除内联元素的默认横向空格

Question

默认情况下，当内联HTML元素包含文本，并且此文本以n行分隔时，此元素的宽度会自动传递以占用父容器的所有可用宽度。因此，如果父容器没有边框或填充，则子内联元素将具有与其父元素相同的宽度。这是一张更好解释的图片：

我想知道是否有某种方法可以避免内联元素的这些默认横向空间（红色）。

<div name="Parent Element" style="width:100%;">
    <div name="Inline Element" style="display:inline-block;">
        I have some text here
    </div>
</div>

我能达到的独特方式是在每个单词之间加上<br>：

<div name="Parent Element" style="width:100%;">
    <div name="Inline Element" style="display:inline-block;">
        I<br>have<br>some<br>text<br>here
    </div>
</div>

但它根本没有解决我的问题。 任何帮助/方向将不胜感激。

Answer 1

• 内联块将占用必要的宽度以在一行中显示内容
• 当达到父宽度时，内容会换行，但宽度将保持等于父级，即使通过包装文本元素看起来会有一些空格。

因此，使用inline-block无法获得您想要的位置。但是，有一种方法：

[name="Parent Element"] {
  display: flex;
  justify-content: center;
  font-size: 3rem;
}

[name="Inline Element"] {
  flex-basis: auto;
  flex-grow: 0;
  text-align: center;
  background-color: yellow;
  max-width: calc(100% - 120px);
}

<div name="Parent Element" style="width:100%;">
    <div name="Inline Element" style="display:inline-block;">
        I have some text here
    </div>
</div>

通常，通过简单地给父级填充（强制孩子换行）来解决这种问题。此外，如果您有多个孩子并且希望他们拥有相同的宽度，请为他们display:block代替inline-block。

Answer 2

inline-block将占用其内部内容的宽度。 所以，我建议将宽度指定为Inline Element。