Truncating long links

[spiros]

Is there a way with css or otherwise to truncate long (external) links in posts, like having an ellipsis added or something if longer than a certain number of characters?

I was using SMFPacks SEO for that but had to remove it due to multiple bugs and hundreds of thousands of errors in my error log.

[Aleksi "Lex" Kilpinen]

Most probably it could be done, but I'm not aware of a mod that does exactly that.
There are mods that use shorteners, and a mod to replace links with titled links, but nothing that I know of to just hide part of a link.

[spiros]

I think I got it:

Code Select Expand

a.bbc_links.new_win {
  display: block;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[Antechinus]

Yup, that's the way to do it. If you want belt and braces for small screens, you can add a max-width: 95%; to prevent horizontal scrollbars.

[spiros]

There is still an issue though, it creates line breaks above and below. Using

Code Select Expand

display:inline-flex fixes that, but there seems to be no way to maintain the ellipsis at the same time.

[SychO]

try inline-block instead, and use max-width:300px instead of width

[spiros]

I had tried that, the result is the link becomes superscript...

https://www.translatum.gr/forum/index.php?topic=577907.msg828967#msg828967

[SychO]

then add a vertical-align: text-top;

[spiros]

That improved it, although it is still off alignment (subscript-wise).

[SychO]

indeed, then "bottom" might be better

[spiros]

Same length of misalignment on the other direction

I think I got it:

Code Select Expand


vertical-align: -5px;

[drewactual]

Code Select Expand


a {overflow-wrap:break-word;
     word-wrap:break-word;
     -ms-word-break:break-all;
      word-break:break-all;
      word-break:normal;
     -ms-hyphens:auto;
     -moz-hyphens:auto;
     -webkit-hyphens:auto;
      hyphens:auto
      white-space:pre-wrap;
      white-space:-moz-pre-wrap;
      white-space:-pre-wrap;
      white-space:-o-pre-wrap;
      word-wrap:break-word
}





just my opinion but get out of the business of forcing a block event into an inline area.  ^ that'll work though maybe not precisely like you want but it'll break it up...