CSS hack to modify html link text? - html

Question

Anyone know of a css hack to change the link text in here:
<div id = "foo"> Long Text for Regular site </div>
to this shorter version.
<div id = "foo"> Shorter Text </div>
I was able to add text before or after the link, using pseudoselectors but no luck modifying the link text itself.
I'm using a squarespace template, so I'm not able to use javascript to do this or generate better html.

Answer 1

You can accomplish something similar to what you're trying to do with with CSS3 text-overflow property:
HTML
<p>The quick brown fox jumped over the lazy 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

Try:
#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;
}
Demo: http://jsfiddle.net/8DK9g/

Answer 3

** Edit **
Just read you can't alter the HTML that is being generated, leaving this here for anyone that may find it useful
** /Edit **
Using Duver Jaramillo's example, I've moved the shortened text onto the a tag using a data- attribute.
See http://jsfiddle.net/3n1gm4/KrwWL/
HTML
<div id = "foo">
Long Text for Regular site
</div>
And the 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;
}