I am dealing with a ul element that contains li's of varying lengths but with a fixed width. Each li also has some icons within it.
<ul>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
<li><span class="icon"></span>Short text</li>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>
Within the li elements, I have set the text-overflow property to text-overflow:ellipsis;.
However, the clipped text that would overflow is blocking cursor interaction with elements behind it (specifically, .icon)
This is my CSS:
.icon {
height:18px;
width:18px;
float:right;
cursor:pointer;
background:url(icons.png);
background-position:-72px -72px;
}
.icon:hover {
background-position:-90px -72px;
}
li {
text-overflow:ellipsis;
height:20px;
overflow:hidden;
white-space:nowrap;
list-style-type:none;
width:150px;
}
Please refer to my jsfiddle for a better explanation:
The obscured text hidden by text-overflow:ellipses is preventing the DOM from registering cursor interactions on elements behind the text.
Do you have any suggestions for resolving this issue?
Thank you!