1

任何人都知道在此处更改链接文本的 css hack：

<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

您可以完成类似于您尝试使用 CSS3text-overflow属性执行的操作：

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 回答