Html break word在div中留下空白区域_Html_Css_Css Position

Html break word在div中留下空白区域

html css

Html break word在div中留下空白区域,html,css,css-position,Html,Css,Css Position,我有以下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;

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


现在让我们检查一下asd4ffdsa sassfhkloitrf。

并输出以下布局

但问题是，我无法清除此处显示的空白

我已经尝试了位置、自动宽度、显示属性等所有可能的修复方法，但我无法消除此处的多余空间。

使用以下方法：

word-break: break-all;

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


现在让我们检查一下asd4ffdsa sassfhkloitrf。

希望这能有所帮助。

给

消息增加一些宽度

类并删除

宽度：自动

它在@MerajKhanuse

text align

属性中执行相同的操作。我为什么要打断单词？因为该位置是为该长单词保留的，并且您的文本对齐是正确的，您可以选择文本对齐：对齐或打断单词