CSS hack修改html鏈接文本？

Question

任何人都知道一個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。

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，離開這個這裏對於任何可能發現它有用的人

**/E Dit **

使用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; 
}