Handling HTML anchors and long unwrapped text with CSS

Jan 27 2020, 2:48am

Anchors or links, like my streaming radios collection below:

If we prefer traditional look however, like the following:

we'll have a little problem.

If a visitor looks at this page with his / her device with Chrome browser on really narrow screen e.g. iPhone 5 / SE then the 2nd, traditional links may break page design responsiveness.

First link may get cut in middle and pushed to next line because it has a "-" (dashed character) but the 2nd link doesn't.

So it seems that the solution is always to use links / anchors with short links. But if long URL text needs to be shown, then I think best solution would be to let CSS control the cut, with ellipsis.

Following example has more consistent look:

And this last list has following CSS:

ul.my-long-items a{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Comments