html - 外に出る要素エレメント

Question

上記の添付ファイルでは、last span(last word- "for"); に問題があります。それは実際に私の灰色の領域から出ています（これは実際にはクラステキストフレームのdivタグです）。

私は本当に問題を抱えていません。html コードも以下に示します。の境界線<span>が表示されているのは、2 つの間にギャップが存在することを確認したいからです<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;スパン要素のデフォルトの表示であるかdisplay: inline-block;、この例では内側のスパンが設定されています（スタイルは要素のstyle属性に表示されます）。setを使用して要素間のスペースdisplay: inline-block;を削除するには、ソースのスパン間の空白（スペース、タブ、および新しい行）を削除する必要があります。

Answer 2

個人的には、親要素に「word-wrap: break-word」を指定し、子スパン要素の幅を指定しました。