5

1 つまたは 2 つの単語がフロートの周りに折り返されるのを防ぐ方法はありますが、それ以上のテキストがある場合は許可しますか? これは、最初のテキストには問題があるが、2 番目のテキストには問題がない例です。

http://jsfiddle.net/wdPCp/

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <span class="last-bit">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</span></div>
</div>

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="last-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</div>

CSS:

img {
    float:left;
    margin:10px;
    width:100px;
    height:100px;
}

.wrapper {
    width:300px;
    margin-bottom:20px;
}

.text {
}

.last-text {
}

更新：テキストがどこで折り返されるかは事前にわからないことに注意してください-存在する場合、一般的な解決策を探しています。たとえば、「.last-text」のスタイルによって、float の下でラップされなくなります。

JavaScript よりも CSS/HTML ソリューションの方が適しています。

4

6 に答える 6

12

単一の単語の折り返しを防ぐのは簡単です。通常のスペース (例: nostrud&nbsp;exercitation) の代わりに、最後の 2 つの単語の間に改行なしのスペースを使用するだけです。

しかし、これでは本当の問題は解決しないのではないかと心配しています。サンプルの場合、2 語の折り返しがあり、最後の 2 行目は短くなります。また、テキストが大きくなると、その必要がない場合でも 2 つの単語がくっついてしまいます。

この問題には、最初の書式設定の後、画像の高さと比較してテキスト ブロックの高さを分析し、いくつかの基準でスタイルを変更する重要な JavaScript コードが必要になるのではないかと心配しています。

于 2013-02-14T21:10:12.827 に答える
3

に追加padding-bottom: 1px;するだけimg

デモ

img {
    float:left;
    margin:10px;
    width:100px;
    height:100px;
    padding-bottom: 1px;
}

右と左の列を使用することもできます。確かにインラインスタイルを使用しましたが、このアプローチを採用したい場合は、クラスを明確にしてインラインスタイルを削除するよりも

デモ2

于 2013-02-14T20:36:22.683 に答える
1

申し訳ありません-明確な答えではありませんが、しばらく前に同じ質問をしました. 私が受け取った回答の 1 つは (JS を使用して) 有望でしたが、これまでのところ解決できていません。私の質問では、役立つかもしれない問題を説明するために画像も使用しています。

CMSを使用したレスポンシブレイアウトで常にこの問題に遭遇します

ぎこちない行の回り込み画像

于 2013-11-12T09:39:30.463 に答える
0

.wrapper解決策は、クラス幅を少し増やすことです。

これが.wrapperクラスです：

.wrapper {
        width:330px;
        margin-bottom:20px;
    }

http://jsfiddle.net/wdPCp/4/

于 2013-02-14T20:37:17.057 に答える
0

フロートの下でテキストを折り返したくない場合に追加overflow: hiddenします。.text

http://jsfiddle.net/wdPCp/6/

于 2013-02-14T22:34:34.983 に答える