Question

我有以下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>

，它输出以下布局

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

我已经尝试过使用位置，宽度自动，显示属性进行所有可能的修复，但是我无法摆脱此处的多余空间。

Answer 1

我已经测试了您的代码，并且要删除空白区域，应该删除 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>

希望这会有所帮助。

Answer 2

使用此：

word-break: break-all;

代替断词

断字使div中的空白区域

2 个答案: