0

重複の可能性:
最後の単語で切れるリンク アイコンを追加しますか?

コンテナーに対してテキストが長すぎる場合、最後の単語の後に表示される背景画像だけでなく、最後の単語を新しい行に分割したいと考えています。

問題の画像は次のとおりです。背景画像でテキストが壊れていない。

「も」という言葉が欲しいです。background-image とともに次の行に改行します。

HTMLは次のとおりです。

<ul>
    <li><a href="#" class="myIcon">The name of some link goes here</a></li>
    <li><a href="#" class="myIcon">The name of some link goes here too.</a></li>
    <li><a href="#" class="myIcon">Here is yet another link that could be used</a></li>
    <li><a href="#" class="myIcon">This could be a really long link that one could try to use also</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
</ul>

CSSは次のとおりです。

.myIcon:after {
    height: 16px;
    width: 16px;
    display:inline-block;
    content:'';
    background-image: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png");
    vertical-align:middle;
}
4

2 に答える 2

1

残念ながら、これがブラウザ間で機能することを確認するには、スパンの最後の単語をラップしてから、アイコンをスパンに適用する必要があると思います。

<li><a href="#">This could be a really long link that one could try to use <span class="myIcon">also</span></a></li>

CSS：

.myIcon {
    display:inline-block;
    background: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png") no-repeat center right;
    padding-right:16px;
    white-space:nowrap;
    text-decoration:underline;
}

例はこちら

于 2013-01-28T17:52:22.903 に答える
1

cssでブレークワードを試すことができます。これにより、テキストが特定の長さの後に自動的に折り返されます。

.myIcon:after {
height: 16px;
width: 16px;
display:inline-block;
content:'';
background-image: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png");
vertical-align:middle;
word-wrap: break-word;
}
于 2013-01-28T17:51:01.110 に答える