<span>元素超出<div>元素</div> </span>

Question

在上面的附件中，最后一个跨度有问题（最后一个字 - “for”）;它实际上是从我的灰色区域出来的（这实际上是带有类文本框架的div标签）。

我真的没有遇到问题。 html代码也如下所示。显示<span>的边框是因为我只是想问一下，两个<span>之间存在一些差距，这是导致最后一个字问题的原因吗？那么如何缩小这个差距呢？

<div style="left:0pt; top:0pt; width:612pt; height:792pt; position:absolute;" class="page">
      <div style="left:103.2pt; top:189pt; width:396pt; height:156pt; position:absolute; background-color:rgb(191,191,191); overflow:hidden; border:0px Solid rgb(0,0,0);" class="textFrame">
        <p style="text-align: justify; padding-top: 0pt; padding-bottom: 0pt;">
          <span class="ln" style="height: 14.4pt; width: 396pt;">
            <span style="font-size: 12pt; font-family: F0; word-spacing: 45.9943pt; width: 197.802pt; letter-spacing: 0em; text-align: left; color: rgb(0, 0, 0); border: 0.1px solid red; display: inline-block;">Subject to the</span>
            <span style="font-size: 24pt; font-family: F0; width: 64.9904pt; letter-spacing: 0em; text-align: left; color: rgb(0, 0, 0); border: 0.1px solid green; display: inline-block;">license</span>
            <span style="font-size: 12pt; font-family: F0; word-spacing: 45.9943pt; width: 133.208pt; letter-spacing: 0em; text-align: right; color: rgb(0, 0, 0); border: 0.1px solid gold; display: inline-block;">terms for</span>
          </span>
        </p>
      </div>
    </div>

Answer 1

您为white-space: nowrap;设置了span.ln，当内容到达其父元素的末尾时，这将阻止它进行换行。除非父级设置overflow: hidden;，否则它会突出父级，在这种情况下，文本将被遮盖。删除white-space: nowrap;规则以允许跨度换行。您可能还会遇到奇怪的布局问题，因为内部跨度为display: inline-block;，这意味着它们在某些内联内容中显示为块元素，您可能也想删除它。

除非跨度实际上在源中彼此相邻，否则任何空格都将呈现为它们之间的空格，而它们是display: inline;，它是span元素的默认显示或display: inline-block; as在此示例中设置了内部跨度（样式在元素的style属性中可见）。要消除具有display: inline-block;设置的元素之间的空间，您需要删除源中跨距之间的空白区域（空格，制表符和新行）。

Answer 2

就个人而言，对我有用的东西， 我给了父元素一个“word-wrap：break-word”和指定子span元素的宽度。