Question

我试图强制div来适应里面的文字。无论我尝试过什么，似乎都有额外的空白区域。这是我的代码：

＆＃13;

body {
  background-color: #000;
}

.holding {
  width: 500px;
  background-color: red;
  height: 500px;
  padding: 40px 100px;
  max-width: 400px;
  width: fit-content;
}

.childone {
  background-color: white;
  display: inline;
  padding: 20px;
  float: left;
  clear: both;
}

.clear {
  clear: both;
}

.childtwo {
  background-color: white;
  display: inline-block;
  float: left;
  padding: 10px;
}

＆＃13;

<body>

  <div class="holding">
    <div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
    <div class="clear"></div>
    <div class="childtwo">This is the next child div with a bund of stuff.</div>
  </div>

</body>

＆＃13;

Answer 1

使用 word-break: break-all ，例如：

.childone {
  word-break: break-all;
}

请看下面的代码段：

body {
  background-color: #000;
}

.holding {
  width: 500px;
  background-color: red;
  height: 500px;
  padding: 40px 100px;
  max-width: 400px;
  width: fit-content;
}

.childone {
  background-color: white;
  display: inline;
  padding: 20px;
  float: left;
  clear: both;
  word-break: break-all;
}

.clear {
  clear: both;
}

.childtwo {
  background-color: white;
  display: inline-block;
  float: left;
  padding: 10px;
}

<body>

  <div class="holding">
    <div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
    <div class="clear"></div>
    <div class="childtwo">This is the next child div with a bund of stuff.</div>
  </div>

</body>

希望这有帮助！