6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

[SOLVED] CSS Question...

by Mike Adams
5 replies
  • WEB DESIGN
    • |
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
#css #question
  • Profile picture of the author barrywolf
    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?
    {{ DiscussionBoard.errors[2369260].message }}
    • Profile picture of the author CarloD.
      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
      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.
      Signature

      {{ DiscussionBoard.errors[2369458].message }}
  • Profile picture of the author Mike Adams
    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.
    Signature
    P.S. If you found my post useful, please click the "Thanks" button below...
    {{ DiscussionBoard.errors[2371075].message }}
  • Profile picture of the author luminousnerd
    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.
    {{ DiscussionBoard.errors[2371115].message }}
  • Profile picture of the author Mike Adams
    Simple fix, I added:

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

    Anything that exceeds one line of this associated link will be hidden.
    Signature
    P.S. If you found my post useful, please click the "Thanks" button below...
    {{ DiscussionBoard.errors[2376140].message }}

Trending Topics