html - 超过容器最大宽度时如何调整自动换行文本宽度？ (HTML)

Question

我试图在缩略图上放置一些文本信息，信息框向左浮动并且不应超过 max-width:85%； (缩略图)。图片中缩略图区域标记为浅灰色，文本信息区域标记为黄色。

当文本超出with时，text holding元素占满85%，自动换行到下一行。我的问题是第一行有多余的空格，我希望这些空格消失。

在我的元素中，黄色区域是缩略图标题，即使里面的文字很少，有时它只是在第一行留下很大的空白，看起来很糟糕。

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

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 只在有足够的单词时才起作用。看看这个:

有理由

没有

Answer 1

我不得不说你要求太多了。如果一段特定的文本对于所提供的空间来说太长，它将换行到下一行。有几个选项，但可能没有您喜欢的选项。

1. 颠倒顺序。左边是缩略图，右边是文字。差距仍然存在，但会向右移动，不会那么明显。

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

2. 右对齐文本。通常不受欢迎，因为它会使文本难以阅读，但如果您最多只看几行文本，那也不会那么糟糕。同样，你仍然会有差距，但现在它会在左边，远离焦点。 text-align:right; 就可以了。

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

在一天结束时，您可以根据需要进行所有调整(文本大小、对齐方式、布局)，但有时您仍会遇到此问题。这就是内容的本质。最好的办法就是意识到它超出了您的控制范围，然后继续前进。