CSS : Rendered width is not exactly while word-wrap

Question

作为width:'auto'，父div的宽度取决于它的子div。但是它在自动换行时会在右侧留下一些可见的空间。如何获得准确的内容宽度，如 this ？

<div class="parent">
  <div>
    Central Central CentralCentral
  </div>
</div>


.parent{
  border:1px solid red;
  white-space:normal;
  word-wrap:break-word;
  width:auto;
  max-width:155px;
}

https://jsfiddle.net/remila_antony/LdLuqhtz/

Answer 1

AFAIK 没有 CSS 唯一的方法来实现你想要的。
如果有的话，也许可以巧妙地使用 flex boxes，我还不是专家，我会很高兴听到它!

与此同时，这里有一段 JavaScript 小曲可以满足您的需求。它会减小宽度，直到高度增加(由更多的单词引起)，然后稍微增加宽度。

var p = document.getElementsByClassName('parent')[0];
var w = p.clientWidth, h = p.clientHeight;
do p.style.width = (w -= 10) + 'px'; while (w >= 10 && p.clientHeight <= h);
do p.style.width = (++w) + 'px'; while (p.clientHeight > h);

.parent {
  border: 1px solid red;
  white-space: normal;
  word-wrap: break-word;
  width: auto;
  max-width: 155px;
}

<div class="parent">
  <div>Central Central CentralCentral</div>
</div>

请记住，这并非万无一失；它起作用的唯一原因是因为您允许文本在单词中间中断。否则，如果您从内容中删除第一个空格，它将失败。