Question

任何人都知道要改变链接文本的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。

Answer 1

您可以使用CSS3 text-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/

Answer 2

尝试：

#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/

Answer 3

**编辑**

刚看过你不能改变正在生成的HTML，这里留给那些可能觉得有用的人

** /编辑**

使用Duver Jaramillo的例子，我已经使用数据属性将缩短的文本移动到标签上。

请参阅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; 
}

CSS破解修改HTML链接文本？

3 个答案: