Question

作为width：'auto'，父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只能实现你想要的东西。
如果有，也许有一些巧妙使用柔性盒，我还不是一个古茹，我很高兴听到它！

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

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

请记住，这不是万无一失的;它起作用的唯一原因是因为你允许文本打破中间词。否则，如果要从内容中删除第一个空格，则会失败。

CSS：渲染宽度不完全是自动换行

1 个答案: