[SOLVED] CSS Question...

by 5 replies
6
How would I shorten a link that is longer than a certain number of characters using CSS? I would also like the full title be shown when a user hovers over the link. See an example at Alltop, all the top stories

The associated CSS reference is .news-entry
#website design #css #question
  • Why dont you just use some coding language such as PHP to do a substring? Any thing too long for CSS just gets returned on a new line or breaks the mould I thought?
    • [1] reply
    • I am not following.... you wouldn't use css to shorten a link.... css is for styling, if your referring to the box that shows up when you hover over a link, you should be looking for a "tool tip" using css.
  • Well I saw Using ellipsis with HTML and CSS as CSS code. As far as the "tip tool", I already use it for the article description. Check out Alltop, all the top stories and scroll over a few titles, if you hover over the long titles it just shows the full title.
  • Sorry Mike, that's not done using CSS. You would need to use Javascript for that.

    You could replicate the functionality with pure CSS if you used image links that changed position on hover, rather than actual text, but I don't see any good reason for doing that, it would make things a lot harder to update.
  • Simple fix, I added:

    .news-entry li a{
    height: 12px;
    overflow: hidden;
    }

    Anything that exceeds one line of this associated link will be hidden.

Next Topics on Trending Feed

  • 6

    How would I shorten a link that is longer than a certain number of characters using CSS? I would also like the full title be shown when a user hovers over the link. See an example at Alltop, all the top stories The associated CSS reference is .news-entry