<span> 元素超出 <div> 元素答案

【问题标题】：<span> element going outside of <div> element<span> 元素超出 <div> 元素
【发布时间】：2016-07-21 06:51:50
【问题描述】：

在上面的附件中，最后一个跨度（最后一个词-“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>

【问题讨论】：

你试过box-sizing: border-box吗？但我想知道你首先试图通过这个实现什么。您使用了很多固定的宽度和高度。

标签： html css text-align justify

【解决方案1】：

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

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

【讨论】：

我们已按照您的指示进行操作，但第三个跳到了第二行，这不是预期的行为。如果我删除 display:inline-block;词的区别是不恰当的。请您发布编辑后的源代码吗？
我希望这三个跨度应该在同一行。实际上这个文本来自我的其他文本文档，我希望 html 中的外观与文本文档相同。
我强烈建议不要使用内联样式，除非您喜欢维护噩梦，但是我已经修改了您的 html 以使其正常工作，删除 display:inline-blocks; 在跨度中添加一些空格，将 word-spacing 添加到中间 div @ 987654321@... 如果两行是你想要的，否则你需要调整word-spacing 或容器的宽度，记住人们可以在他们的浏览器中控制文本大小，所以使用em 会比pt 中的绝对大小要好。
我建议不要这样做。网页是网页，文本文档是文本文档。 HTML 网页不是静态的 Word 文档。如果要显示实际文档，请上传 PDF。否则，如果您想创建一个网页来显示文档中包含的内容，请执行此操作，但要制作一个网页而不是文本文档的糟糕副本。

【解决方案2】：

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

【讨论】：