Span的元素内容不会完全显示

Question

从jsFiddle考虑​​以下示例。

<span>This is a very long text's line which containts in a span element. This is a very long text's line which containts in a span element. This is a very long text's line which containts in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which containts in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element. This is a very long text's line which contains in a span element.</span>

CSS样式：

span {
    background-color: aqua;
    padding:100px;
    text-align: center;
    margin: 5px;
}

为什么span元素中包含的文本与背景重叠并且不完全显示？

Answer 1

即使应用了display：block;

，也会有太多的填充和较短的宽度

Answer 2

Inline formatting contexts

  

基本上可以在内联级别设置边距，填充和边框   元素，但它们可能不像你期望的那样。行为会   如果只有一行，但同样的其他行可能是好的   流动可能会表现出与您的期望不同的行为   （即不会遵守填充）。此外，您的内联框可以   如果它包含易碎元素并达到边缘，则被打破   包含元素;在这种情况下，在休息点，边缘   并且填充也不会受到尊重。

我认为您正在寻找word-spacing，

span {
    background-color: aqua;
    word-spacing:1px;
    text-align: center;
}

有关信息：

内联元素和填充/边距

虽然填充/边距可以应用于内联元素的所有边，但只有左右填充边距会对周围内容产生影响。