css - CSS でテキストを常に段落とインラインに保つ方法

Question

幅が不明なテキストのブロックがあり、その直後に別のテキストを配置して、常に最後の単語に貼り付けたいと考えています。最初のブロックが 1 行の場合、両方を 'inline' または 'inline-block' に設定するだけで十分ですが、最初のブロックが複数行の場合、2 番目のブロックは常に次の行に移動します。

コード：

html

<div id="text">sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.</div>
<div id="new">New</div>

CSS

div {
    float: left;
    display: inline-block;
}

http://jsfiddle.net/nmuUd/1/

「New」は、常に前のブロックの最後の単語に固執する必要があります。これどうやってするの？

編集:明確にするために、マークアップを変更することはできません。コンテンツは常に 2 つの個別の div にあります。

Answer 1

このような：

html

<div id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. 
<div id="new">New</div></div>

CSS

#new {
    background: red;
}

div {
    display: inline;
}

Answer 2

'inline-block' 要素があり、テキストの長さが親コンテナーの幅 100% を埋めるのに十分な場合、2 行目の幅も 100% になるため、テキストが押し下げられます。そのため、2 番目の div は最初の div の下でレンダリングを開始します。div を 1 行にまとめたい場合は、「display: inline;」を指定する必要があります。財産。

著者名などの静的で短いテキストの場合は、次のように疑似要素 ':after' を使用できます。

div.text:after{
    content: ' put you text here'; /*remember to put whitespace on the beginning*/
    background-color: red;
}

ただし、「div」をインライン要素として使用する場合は、「display: inline;」を使用してください。フロートなし:

div.text{
    display: inline;
}

私が助けてくれることを願っています。

Answer 3

あなたのフィドルの を取り除くfloat:left;ことは、あなたが探していることをするようです。

Answer 4

を削除するだけfloatで、2 つの divdisplay: inlineで十分な場合があります。

Answer 5

フィドル

あなたはスパンを利用することができます

<span id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. </span>
    <span id="new">New</span>

Answer 6

このような

デモ

CSS

#new {
    background: red;

}

div {

    display: inline-block;
}