0

サムネイルにテキスト情報を表示しようとしていますが、情報ボックスが左に浮いており、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 は、十分な単語がある場合にのみ機能します。これを見てください：

ジャスティファイあり

ここに画像の説明を入力

それなし

ここに画像の説明を入力

4

1 に答える 1

1

求めすぎだと言わざるを得ません。テキストの特定のビットが提供されたスペースに対して長すぎる場合、次の行に折り返されます。いくつかのオプションがありますが、おそらく気に入るものはありません。

  1. 順序を逆にします。左がサムネイル、右がテキスト。ギャップはまだ存在しますが、それほど目立たない右に移動します。

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

  2. テキストを右揃えにします。テキストが読みにくくなる可能性があるため、通常は好まれませんが、最大で数行のテキストしか見ない場合は、それほど悪くはありません。繰り返しになりますが、ギャップはまだありますが、焦点から離れた左側にあります。text-align:right;トリックを行います。

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

1 日の終わりに、必要なすべての調整 (テキスト サイズ、配置、レイアウト) を行うことができますが、それでもこの問題が発生する場合があります。それがコンテンツの性質です。最善の方法は、それが自分の手に負えないことに気づき、先に進むことです。

于 2013-09-29T14:56:21.827 に答える