1

ここでリンクテキストを変更するCSSハックを知っている人は誰でも:

<div id = "foo"> <a href="/" rel="bookmark">Long Text for Regular site</a> </div>

この短いバージョンに。

<div id = "foo"> <a href="/" rel="bookmark">Shorter Text</a> </div>

pseudoselectorsリンクテキスト自体を変更しても、リンクの前後にテキストを追加できました。

テンプレートを使用しているsquarespaceため、javascript を使用してこれを行ったり、より適切な html を生成したりすることはできません。

4

3 に答える 3

2

text-overflowCSS3プロパティでやろうとしていることと同様のことを達成できます。

HTML

<p>The quick brown fox <a href="#" class="truncate">jumped over the lazy</a> dogs.</p>

CSS

P {
    font-size:12pt;
    line-height:12pt;
}

.truncate {
    display:inline-block;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height:11pt;
}

JSFiddle

http://jsfiddle.net/LcS7a/

于 2013-10-28T20:48:52.220 に答える
1

試す：

#foo a{
    text-indent: -9999px;
    visibility: hidden;
    word-spacing:-999px;
    letter-spacing: -999px; 
}
#foo a:after{
    content: "New Text";
    visibility: visible;
    word-spacing:normal;
    letter-spacing: normal; 
}

デモ: http://jsfiddle.net/8DK9g/

于 2013-10-28T20:54:45.873 に答える
1

** 編集 **

生成されている HTML を変更することはできないので、役に立つと思われる人のためにここに残しておきます。

** /編集 **

Duver Jaramillo の例を使用して、data- 属性を使用して短縮テキストを a タグに移動しました。

http://jsfiddle.net/3n1gm4/KrwWL/を参照してください

HTML

<div id = "foo">
    <a href="/" rel="bookmark" data-short-text="Shortened Text">Long Text for Regular site</a>
</div>

そして、CSS

#foo a{
    text-indent: -9999px;
    visibility: hidden;
    word-spacing:-999px;
    letter-spacing: -999px; 
}
#foo a:after{
    content: attr(data-short-text);
    visibility: visible;
    word-spacing:normal;
    letter-spacing: normal; 
}
于 2013-10-28T21:15:57.353 に答える