93

私はこのHTMLを持っています:

<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

:after 疑似要素を使用してアイコンを追加しています。

ul li.completed a:after {
    background:transparent url(img.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
}

問題: 使用可能な幅が小さすぎると、アイコンが次の行に折り返されます。追加されたリンクの最後の単語と同じ行にとどめたいと思います：

ここに画像の説明を入力

リンク全体に「nowrap」を追加せずに、これは実行可能ですか（アイコンではなく、単語を折り返す必要があります）。

ここでjsFiddle を参照してください。

4

11 に答える 11

95

JSFiddle - http://jsfiddle.net/Bk38F/65/

疑似要素に負のマージンを追加して、幅を補正します。

ul li.completed a:after {
    background:transparent url(img1.png) no-repeat; 
    content: ' ';
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: -24px;
}

これにより、アイコンがコンテナーからはみ出し、テキストが行末に達したときにのみ行が途切れます。アイコンを元のコンテナー幅内に維持する必要がある場合は、パディングを追加して再度補正することができます。

ul li.completed a {
    display: inline-block;
    padding-right: 24px;
}

重要な更新:

このメソッドが機能するには、テキストと疑似要素を保持する要素の終了タグの間に空白があってはなりません。疑似要素の幅は負のマージンによって補正されますが、空白は親要素の端に達すると改行します。たとえば、これは機能します：

<span>text goes here</span>

これはしません:

<span>
    text goes here
</span>
于 2014-09-15T22:38:16.707 に答える
19

これは以前の回答と少し似ていますが、肉付けして完全に説明したいと思いました。

を設定するとすぐに、非テキストバインディング要素display: inline-blockになります。:afterこれがラップする理由であり、nowrap が効果がない理由です。だから放っておくdisplay。

デフォルトではテキスト要素であるため、間に空白がない限り、コンテンツは前のテキストにバインドされます。したがって、何も追加しないでください。ただし、 があることを確認してcontent: ""くださいdisplay: none。唯一の問題はheight、 とwidthが によって制御されているcontentことです。この場合は折りたたまれています。、行の高さwidthも0同様です。height

パディングで領域のサイズを変更します。左右、関係ありません。marginアイコンがテキストに触れないように少し追加します。すべてを相対的なサイズ ( em、ptなど) のままにし、 を使用background-size: containして、アイコンが絵文字やフォントのようにテキストに合わせてスケーリングされるようにします。最後に で目的の場所にアイコンを配置しますbackground-position。

ul li.completed a:after {
  content: "";
  background: url('icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.2em; /* spacing*/
  padding-right: 0.75em; /* sizing */
}

これを外部リンク ( a[href*="://"]:after) に使用しましたが、Firefox、Chrome、および iOS で正常に動作しました。また、アイコンはテキスト要素のままであるため、バインド後の直接テキストであっても、閉じ句読点も折り返されます。

于 2016-07-17T05:44:44.300 に答える
19

代わりに最後の単語に画像を追加できます。それはそれを一緒に壊します。

クラスを単語に追加する <strong class="test">word</strong>

と.test:after { ...

http://jsfiddle.net/52dkR/

トリックはまた、そのクラスをinline-block

下線を残したい場合は、これを参照してください。

http://jsfiddle.net/atcJJ/

追加 text-decoration:inherit;

于 2013-04-19T09:17:11.503 に答える
8

アイコン フォントを使用している場合:\00a0疑似要素のコンテンツ (この場合は Font Awesome グリフ) と共に "ノンブレーク スペース" Unicode を使用します。

これは、追加のマークアップや特別なフォーマットやクラス名なしで機能します。

a[href^='http']::after {
  content: '\00a0\f14c';
  font-family: 'Font Awesome 5 Pro', sans-serif;
  line-height: 0;
}

このline-height: 0;部分は、最後の「単語 + アイコン」が折り返されたときに線がひきつらないようにします。

CodePen の例

于 2018-12-11T21:55:08.343 に答える
7

私は同じ問題を抱えていました。最後の単語にストロング タグやスパン タグを追加するというアイデアはあまり好きではなかったので、:after または :before 疑似要素を使用する代わりに、背景画像としてアイコンを追加して、右側にパディングを追加してみました。私のために働いた！

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last word</a></li></ul>

ul li.completed a {
background: url(img1.png) no-repeat 100% 50%;
padding-right: 18px;
}

http://jsfiddle.net/atcJJ/36/

于 2014-06-27T18:43:57.087 に答える
3

前にタグを必ず終了してください

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></a></li></ul>

以下のcssを試してみてください。「後」を使用する代わりに「前」を使用し、右にフロートします。

ul li.completed a:before {
    background:transparent url(img1.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
    float:right;
}

これを確認してください： http://jsfiddle.net/supriti/atcJJ/7/

于 2013-04-19T09:11:30.013 に答える
3

なくても可能:afterです。背景を持つ要素はdisplay:inline.

<h1><span>I want the icon to stay on the same line as this last word</span></h1>

h1 span {
   padding-right: 24px;
   background: url('icon.svg') no-repeat right top; 
}

http://jsfiddle.net/my97k7b1/

于 2016-12-23T09:23:32.933 に答える