How do you style text that overflows?

Question

I have an unordered list in column format that is populated dynamically, usually with just one or two words per <li>, but occasionally a longer list item appears. In order to preserve my columns, I have chosen to hide the excess text of these longer items with ellipsis:

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

But I still want to give the user access to these items, so I've created a hover style like so:

li:hover {
  overflow: visible;
}

This reveals the text into the space between columns, but stops when it reaches the neighboring <li>. I want to give priority to the <li> that is hovered so it is displayed above the others and with an opaque background. Playing around with z-index didn't do the trick.

Here is a fiddle: https://jsfiddle.net/9p7qeon2/

score 2 · Answer 1 · answered Apr 14 '16 at 18:09

2

The way I went about doing this is adding a span within the LI and then on hover have the span become position:absolute. With this you can control how the full text is shown and can be styled. The only down side is that the LI will need a height as to not lose its height due to the span becoming absolute. Check out the fiddle

answered Apr 14 '16 at 18:09

Luigi Guarnuccio

21
5

That's a great idea. Your fiddle works great in Firefox, Opera, and IE 11, but Chrome does some weird flickering and dumps it to the bottom left corner of the content. Any idea why? – MrMcPlad Apr 14 '16 at 23:16
What version of chrome are you running? I'm running 50.0.2661.75 m and I am not seeing this issue. But if I had to guess it would have to be adding an `position:relative` to the li element itself. That is the only thing that makes sense to me. Because I believe the span is being absolute to the body as opposed to its parent li. – Luigi Guarnuccio Apr 15 '16 at 12:10
I was running 49.0.2623.112 m, but I just updated to 50.0.2661.75 m and the flicker is still there. I took a screen capture so you can see what I'm seeing. [link](http://sendvid.com/00y7iu92) My updated fiddle (the one shown in the video) is here: [link](https://jsfiddle.net/kpqd5gq3/2/) The problem is apparently related to the columns calculations the browser is doing. It wants to put the absolutely-positioned spans down where they _would_ go if it was a single column. – MrMcPlad Apr 15 '16 at 18:44
ugg -- sorry I didn't know sendvid.com was such a spammy video site :\ [here's a better link to the video](https://streamable.com/7k7m) – MrMcPlad Apr 15 '16 at 19:20

Simon Hayter · Answer 2 · 2016-04-14T17:17:11.180

It would seem that the issue your having is a result of having a fixed width on the columns. Example: column-width: 200px Since your using a hover on a child you won't be able to change the width on the parent using pure CSS. Your have to use jQuery or something to .addClass to the UL (parent) element and then use something like: ul.active { column-width: 300px; }, but this is going to have undesirable effects on all other elements.

You will find that using a fixed width in this way will have many issues across different browsers, for example your issue is somewhat different depending on what browser is used:

Firefox will display the full text but will not display the background colour.
Chrome and MS Edge will display the background colour but not the full text... and frankly this is correct, because the container is restricted to 200px. I do not believe browsers support min-column-width and my tests do not resolve the issue.

You could use floats using a fixed percentage which will display on larger screens and then hide on smaller screens. See the JSFiddle a made for you, obviously this code will need adjusting to match your requirements but its in the right direction.

Summary... the issue is that you have 200px set as the width... to override that width you must use min-width, position: fixed or position: absolute. That's all I can think of right now.

I thought that `column-width` wasn't as strict as `width`. I've seen references that say you can think of it as a `min-width`. According to w3: describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). https://www.w3.org/TR/css3-multicol/#column-width — MrMcPlad, Apr 14 '16 at 17:37

How do you style text that overflows?

2 Answers2