Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question

3 Answers 3

up vote 2 down vote accepted

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

share|improve this answer
    
Some useful hints there - thanks, I'll give it a go. –  DisgruntledGoat Dec 1 '10 at 11:09

You could use the abbreviation tag as follows:

<abbr title="Hypertext Markup Language">HTML</abbr>
share|improve this answer
2  
Anyone care to share why this was voted down? Not particularly bothered, but it would be nice to learn from my mistakes –  Piers Karsenbarg Dec 14 '10 at 11:07

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

share|improve this answer
1  
The "em" measurement specifies the width of the widest character in most fonts - a capital "M" - and is therefore the better way to display a single character width from CSS regardless of font-size. Note that only monospace fonts will reliably print only one character within 1em - which is why using letter-spacing to put the next character out of the display field is advisable in this case. –  danlefree Dec 1 '10 at 13:56
    
Whoever gave a -1 could also explain, thanks! –  Marco Demaio Dec 6 '10 at 20:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.