Can I show abbreviation but have full text in the HTML?

Question

In several places I am using linked abbreviations for a set of words, and Google is picking these abbreviated terms as sitelinks. Problem is, the abbreviation only makes sense in context, not when viewing the Google site links.

Each link has a title with the full text. Is there a way to only show the first 3 letters but keeping the entire string in the HTML? Setting a short width doesn't work well.

Answer 1

CSS directives:

a.abbrev span { display:none; }

Links:

<a href="..." title="Full Text" class="abbrev">FT<span> (Full Text)</span></a>

---

Updates: ... a less ugly solution and why other avenues of exploration will probably not yield the desired results.

CSS directives:

a.abbrev span {
  display:block;
  float:left;
  width:1em;
  letter-spacing:2em;
  overflow:hidden;
}

Links:

<a href="..." title="Full Text" class="abbrev"><span>Full</span> <span>Text</span></a> 

Things that won't work:

Using F<span>ull</span> T<span>ext</span> with display:none: Google displays <span> tags in links as spaces - i.e. your links would appear at Google as "F ull T ext"

<acronym title="Full Text">FT</acronym> - Won't be expanded

<abbr title="Full Text">FT</abbr> - As with <acronym>, highly doubt this will be expanded for purposes of Site Links

CSS :not() selector: :first-letter is a pseudo class and the :not() selector does not accept pseudo classes

Answer 2

You could use the abbreviation tag as follows:

<abbr title="Hypertext Markup Language">HTML</abbr>

Answer 3

Try this

<a href="..." title="Full Text" class="abbrev">AB<span>Full Text</span></a> 

a.abbrev span {
   white-space: nowrap;
   width: 15px; /* adjust the with to show the approximate number of letters you want  */
   overflow: hidden;
   text-overflow: ellipsis;
}

I'm not sure it works cause I didn't have the time now to test it, let me know.

Ref. http://www.quirksmode.org/css/textoverflow.html