使用最大宽度自动调整大小 div

Question

我正在尝试为文本创建一个 div，它根据 div 中的文本大小调整宽度，但也有最大宽度，因此将文本分成多个如果超过了最大宽度。文本确实会调整一行文本的大小，并在文本太多时拆分，但当有多于一行时，一个大的 space 会出现在文本右边缘和边框之间的 div 内。

HTML:

<div class="balloon">
  This is sample text. This is a second sentence.
</div>

CSS:

.balloon {
  background: #FFF;
  border: solid 2px;
  display: inline-block;
  max-width: 225px;
}

这是一个演示我的意思的演示： http://jsfiddle.net/oft3n5wg/

关于如何解决这个问题有什么想法吗？

Answer 1

这只是因为第 2 行的第一个单词太大，无法放入 space 您已用红色突出显示。将单词 "second" 替换为 "seco"，您会发现它适合

你可以添加一个 text-align: center 这样 space 就不会像你想要的那样糟糕，或者添加 letter-spacing: 1px 这样字母之间就有更多的 space它会填充白色 spaces 多一点

Answer 2

你的内容在这里

整个想法是指定最大宽度并设置

Auto resizing div with max width