html - 断字使div中的空白区域

我有以下HTML和CSS

<html>
<body>
<div class="a" style="
    background-color: black;
    color: #fff;
    max-width: calc(65% - 75px);
    width: 21%;
    display: inline-block;
    float: right;
    position: relative;
    padding: 3px 5px;
">
<span class="message" style="
    width: auto;
    position: relative;
    text-align: right;
    display: inline-block;
    width: auto;
    word-break: break-word;
">let's check this one now for asd4ffdsa sassfhkloitrf.</span>
</div>

</body></html>

并输出以下布局

但是问题是我无法摆脱此处显示的空白区域

我已经尝试了所有可能的修复方法，包括位置，宽度自动设置，显示属性，但我无法摆脱这里的多余空间。

最佳答案

我已经测试了您的代码，并且要删除空白区域，应该删除width属性或将其设置为auto，因为它将强制页面宽度的21％作为宽度。
所以应该是这样的：

<html><body>
    <div class="a" style="
      background-color: black;
      color: #fff;
      max-width: calc(65% - 75px);
      display: inline-block;
      float: right;
      position: relative;
      padding: 3px 5px; ">
    <span class="message" style="
      width: auto;
      position: relative;
      text-align: right;
      display: inline-block;
      width: auto;
      word-break: break-word; ">let's check this one now for asd4ffdsa sassfhkloitrf.</span> </div>

</body></html>

希望这可以帮助。