Multi Line Links Or ...

[FrizzleFried]

Hello...

How difficult would it be to convert code that presents links like this...

You cannot view this attachment.

...like this...

 You cannot view this attachment.

...with the single line only and if the link is too long for the single line it adds the '...' rather than kick down a line and continue the link?

Thanks!


EDIT: BTW... my apologies for the unfortunate news topic in the example... I really didn't even bother reading it until just now... not the most appropriate... my apologies.

[Arantor]

There is the text-overflow property but it's notoriously fickle to make it work. Do you happen to have a link where I can see this in-situ?

[FrizzleFried]

There is the text-overflow property but it's notoriously fickle to make it work. Do you happen to have a link where I can see this in-situ?

Sending PM.

[Arantor]

Code Select Expand

.linkpreview > div {
  width: 100%;
  overflow: hidden;
}
.linkpreview .bbc_link.largetext {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 99%;
  text-overflow: ellipsis;
}

So what's going on here, .linkpreview > div ensures the div that contains the content doesn't do anything weird and stays inside the boundaries of its parent, and any content that would go outside of that boundary gets cut off.

Then we get to the complicated part. First we need to make the link into something that has a defined shape - inline text has no defined shape, therefore no bounding box so you can't force boundaries on it which we're going to need to do.

Then we tell it to not wrap to two lines, so it'll have to keep it together - which means instead of the box getting taller as it wraps, it will try to make it wider.

But we then tell it that it can't get wider - width is 99% of its parent, and any overflow must be hidden (so no scrollbars). Then lastly, we say that if you're overflowing and you're going to do something to the text, transform it with an ellipsis at the end.

[FrizzleFried]

Working absolutely perfect... as usual!  Thank you very much and thank you for the explanation of what you did to accomplish it.

[FrizzleFried]

Whoops... ALMOST perfect... and this isn't a huge deal if it is what it is...

Shorter links... they include a long underline well past the end of the link...any way to cut them at the end of the text of the link?

You cannot view this attachment.

...it sort of looks like it was a design choice. 

[Diego Andrés]

Using text-decoration: underline instead of adding a border?
I don't have the link but I assume it's a border right now.

[Arantor]

Change the width to max-width

The underline is a symptom of the .bbc_link class.

[FrizzleFried]

Holy smokes.  That simple.  I really need to take a CSS course or 10...

[FrizzleFried]

Holy smokes.  That simple.  I really need to take a CSS course or 10... again, thank you.

[Antechinus]

You can probably simplify this quite easily:

Code Select Expand

.linkpreview > div {
  width: 100%;
  overflow: hidden;
}
.linkpreview .bbc_link.largetext {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 99%;
  text-overflow: ellipsis;
}


First part:

Code Select Expand

[code]
.linkpreview > div {
  width: 100%;
  overflow: hidden;
}I cannot see why this is necessary, and I really don't want every bugger who doesn't understand the code to start including this as cargo cult code all over SMF.

If it's a div, it will already be 100% width by default (block level element). You're restricting the width of the relevant child element, and setting overflow on that, so there should be no need to set width or overflow on the parent div (unless they are set to an inconvenient value somewhere else).

The second part is what actually does the job:

Code Select Expand

.linkpreview .bbc_link.largetext {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 99%;
  text-overflow: ellipsis;
}That should be all you need (something similar has always worked for me). If you want to get really persnickety, inline-block can force a right margin of approximately .25em (depending on how the markup is written). You could end up with a situation where 1% of the width was less than .25em, in which case the layout might look a bit broken (say on a small phone or whatever). So if you really want to cover your butt you could use calc() for max-width:

Code Select Expand

.stuff { max-width: calc(100% - .25em);}Which would be bulletproof in any situation.

[Arantor]

Because you're not seeing the full picture. That parent div already had other styling where it ended up with a wider than 100% width. I tried what you were suggesting before working out I needed to constrain the parent div.

But sure, let's assume I'm incompetent and cargo culting for the sake of it - you certainly aren't the first today who's called my competence at web development into question.

[Antechinus]

Ok, fair enough. Unusual case then (rare for anything be be set to > 100%).

[live627]

Code Select Expand

.linkpreview > div {
  width: 100%;
  overflow: hidden;
}I cannot see why this is necessary, and I really don't want every bugger who doesn't understand the code to start including this as cargo cult code all over SMF.

because flexbox