16

テキスト文字列の最後の単語に Font Awesome アイコンを付けたい:

foo bar●

ただし、行の折り返しが必要な場合は、アイコンを最後の単語に付けて、それらをまとめて折り返す必要があります。

foo
bar●

私の問題は非常に似ています: :after 要素が次の行に折り返されないようにする

ただし、ソリューションは、最後の単語にアクセスできることを前提としています。私の場合、テキストは動的に生成されます。アイコンが最後の単語でラップされるようにする css/html のみの方法はありますか?

ここにjsfiddleがあります。

4

3 に答える 3

14

@Unmocked が提供した変更が実際に機能する理由を指摘したかっただけで、それはdisplay: inline と display: inline-block の違いに関係しています。

block説明のために、ディスプレイとディスプレイの違いの背景を少し説明しinlineます。

ブロック表示

block要素は、一般に、レイアウトを引き起こす要素です。それらは独自の境界ボックスを受け取り、ブラウザーのレンダリング領域内で使用可能なスペースに収まるように、他の要素をある程度押し込むことができます。blockアイテムの例: h1、p、ul、およびtable。これらの各項目は、デフォルトで新しい行を開始し、閉じたときに独自の行も終了することに注意してください。つまり、独自の段落レベルのセクションを作成することで、テキスト ブロックに収まります。

インライン表示

inline一般に、要素はテキストとインラインで表示されます。つまり、テキスト行内に表示されるように設計されています。例としてi、 、b、またはがありspanます。デフォルトでは、これらの各項目は、前後に改行を強制することなく、周囲のテキストの流れを継続することに注意してください。

中途半端なケースに突入…

インラインブロック表示

inline-block上記2つのハイブリッドです。本質的に、inline-block要素はその前のテキストが終了するところから始まり、ドキュメントの流れに収まるように試みますinline。ただし、必要なポイントに到達すると、要素であるかのように新しい行wrapにドロップされます。後続のテキストは要素の直後に続き、通常どおり折り返します。これにより、いくつかの奇妙な状況が発生する可能性があります。blockinline-block

これが私の言いたいことを示すための例です。実際の動作を確認するには、この cssdesk snippetをチェックしてください。

ここに画像の説明を入力

あなたの例では、:after疑似要素を次のように設定しdisplay: inline-blockていました。つまり、ラッピングディスプレイの右端の境界を超えて拡張された場合、例の水色のテキストのように機能し、ラップされました。ブロック。代わりに:after要素をに変更するdisplay: inlineと、他のテキストと同じように動作し、その前の文字との間に空白がなければ、単語の折り返しが希望どおりに動作します。

これが役立つことを願っています！

注：元のフィドルと更新されたフィドルの間で変更されたもう1つのことはwhite-space、テキストの周りの削除です。

最初のフィドルでは、HTML は次のようになります。

<div class="container2">
    foo bar
</div>

ブラウザーはテキストの前後にスペースを表示しませんが、スペースを含み:afterます。要素がレンダリングされると、次のようになります。

<div class="container2"> foo bar :after</div>

ブラウザーは複数のスペースを 1 つのスペースに圧縮しますが、それでも単語"bar"と:after要素の間にスペースを入れます。他の単語間のスペースと同様に、これにより、特定の幅で"bar"前後に折り返しが発生します。:after

2 番目のフィドルでは、以下を使用しています。

<div class="container-wide">foo bar</div>
<div class="container-narrow">foo bar</div>

この場合、文字列の末尾にスペースがないため、ブラウザはコンテンツ文字列の直後に表示される要素"foo bar"をレンダリングします。:after次のようなことが起こっているかのようです。

<div class="container-narrow">foo bar:after</div>

inlineレンダリングされたテキストに区切りがないということは、区切りがないことを意味します。

これを示す例については、jsFiddle のこの更新を参照してください。

于 2013-04-29T22:50:49.567 に答える
2

アイコンと css 変換の幅に負のマージンを使用できます。ここでフィドルを行う方法：

    .container {
        width: 50px;
    }
    .icon-circle {
        background:black;
        height:10px;
        width:10px;
        display: inline-block;   
        margin-left:5px;
    }
    .ANSWER{
        display:block;
        padding-right:15px; /* width of the icon */
    }
    .ANSWER .icon-circle{
        margin-left:-10px;
        transform:translate(15px);
    }
    <h4>What we want</h4>
    <div class="this-is-how-it-should-wrap">
        foo bar<i class="icon-circle"></i>
    </div>

    <div style="margin-top:25px"></div>

    <h4>What happenned</h4>
    <div class="container NORMAL">
        foo bar<i class="icon-circle"></i>
    </div>

    <div style="margin-top:25px"></div>

    <h3>The answer</h3>
    <div class="container ANSWER">
        foo bar<i class="icon-circle"></i>
    </div>

良い１日を！

于 2015-06-09T19:32:40.627 に答える