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

Question

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

当文本超过 with 时，文本保持元素占满 85%，自动换行到下一行。我的问题是第一行有多余的空格，我想去掉。

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

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

jsFiddle 演示

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/

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