如何在超过容器最大宽度时调整自动换行文本宽度？ （HTML）

Question

我试图在缩略图上放置一些文字信息，信息框浮动到左边，不应超过最大宽度：85％; （缩略图）。缩略图区域在图片中标记为浅灰色，文本信息区域为黄色。

当文本超过with时，文本保持元素ocupies满85％并且word换行到下一行。我的问题是第一行有额外的空格，我想去。

在我的项目中，黄色区域包含缩略图标题，即使其中的单词很少，有时它只会在第一行留下大的空白，看起来很糟糕。

有什么方法可以解决这个问题，还是我要求太多？

jsFiddle demo

HTML

<div id="main">
<div id="text">
    <h3>Some text and line breaking words. Some text and line breaking words.
      Soaaaaame text and line breaking words.<h3>
</div>

CSS

#main {
width:100%;
background-color:#ccc;
}

#text {
display:inline-block;
max-width:85%;
background-color:yellow;
}

编辑：text-align：justify只在有足够单词的时候完成工作。看看这个：

WITH JUSTIFY

WITHOUT

Answer 1

我不得不说你问的太多了。如果文本的特定位对于提供的空间而言太长，则它将换行到下一行。有几种选择，但可能没什么可比的。

1. 撤销订单。左侧缩略图，右侧文字。差距仍然存在，但会向右移动，在那里它不会那么明显。

   示例：http://jsfiddle.net/fvdJm/4/

2. 右对齐文字。通常不是首选，因为它可以使文本难以阅读，但如果你只是看最多几行文本，它就不会那么糟糕。同样，你仍然会有差距，但现在它将位于左侧，远离焦点。 text-align:right;会做到这一点。

   示例：http://jsfiddle.net/fvdJm/3/

在一天结束时，您可以进行所需的所有调整（文本大小，对齐方式，布局），但有时您仍会遇到此问题。这就是内容的本质。最好的办法就是意识到它不受你的控制，继续前进。