javascript - Anchor tag display full link issue -

I have found some very awesome link regex which works incredibly great, it is the only main of a link Participates and displays it as the body of anchor tag and shows the entire href as a href. In the example, http://somesite.com/index.php?some=var would simply look like somesite.com . Which is just pure awesomeness, but then again it is as well as its down side, because somebody may have passed some variables that you may not necessarily want to send to any reason and I thought I needed to display the whole URL in the anchor body. Unfortunately, I just do not want to give it to the beautiful anchor and I decided that I should show the full link on any event and there was trouble like this.

First of all I thought I should go for mouse hover (jQuery mouseenter) to display the full link and then use the mouseleave to make it beautiful again. Unfortunately, due to few site names at the end of a line with a bunch of parameters was unsuccessful. Example: If there is an anchor with the body site.com and href http://site.com/some/params at the end of a line, then expand it Afterwards go to the next line which will trigger the mouse to touch and thus compress it, so that it will return the link to the original line itself and will increase the function to create an infinite loop.

The second idea is to expand a right-click link, clearly the context menu should be expanded on those links which have to be disabled. Unfortunately, again, a context menu can be shown when there is only one link at the end of a row, because even after the extension of the correct click is triggered on the empty space, where there was a small link.

I think that is to escape from thoughts, do not anyone have anybody?

Without breaking the layout, you can use the original property to display the original URL, Or for some more customizable, a plugin such as jQuery UI.

  & lt; A href = "http://www.shorturl.com/?param = NotSoShortUrl" title = "http://www.shorturl.com/?param=notSoShortUrl" & gt; Shorturl.com & lt; / A & gt; The   
  title  attribute is output to the initial markup, this solution also works with JS disabled. And if you feel like this, jQuery UI Tooltip can get this customization help for the JS-enabled user.  
 
 If anyone is interested in how to break the line break issue described in OP, here is your original break link to obtain non-line solutions:  
  & lt; A href = "http://www.aaaaaaaaaaaaaaaaaa.com/?params=somelongstring" & gt; Aaaaaaaaaaaaaaaaaa.com & lt; / A & gt;   
  
  $ ('one'). Hover (function (e) {$ (this) .text (e.type == 'mouseenter'? This.href: $ (this) .data ('SHORTURL'));}) Each (function () {$ (This) .css ({width: this.offsetWidth, of empty space: 'nowrap', display: 'inline-block'}). Data ('short', $ (this) .text ());}); However, this can mostly be leaked out of a CSS hack and link text container (and obviously, if the  overflow: hidden  in the container), so this layout is not very good for purposes. Better stick with  title  or tooltip plugin.