16

This question is by no means dire, but it's a problem I've encountered and was wondering how some of the SO experts would solve it - if there is a solution.

I have a fixed-width UI widget that displays file information. I'm providing the ability to edit the filename by clicking on it and to indicate that functionality I have a :hover style applied to change the font color. Originally I put the filename within a DIV, but since different filenames are different lengths I can't size the DIV to the filename and keep the :hover effect tight to the text. With short filenames the :hover effect still displays when the cursor is over the empty part of the DIV. This wasn't what I wanted so as a solution I put the filename within a SPAN (along with the :hover effect). That solved the problem for short filenames but prevented the long filenames from overflowing gracefully with an ellipse.

Ideally I'd like a solution that achieves both effects - ellipse long filenames and apply the :hover effect only when hovering over the actual text. I'm still pretty new to css so maybe I'm just missing an obvious answer. Thanks!

Here is an example page showing the issues:
(and on jsfiddle)

Edit: I figured I could perform some javascript magic to clip the longer names, but was hoping for a simpler css solution.

<html> <head> <style> div { margin:10px; width:200px; max-width:200px; font-size:1.2em; overflow:hidden; text-overflow:ellipsis; } div.a:hover, span:hover { color:666; cursor:pointer; } span { display:inline-block; } </style> </head> <body> <!-- This works well for long filenames --> <div class="a"> ThisIsMyReallyReallyLongFilename.txt </div> <!-- ... but fails for the short names --> <div class="a"> Shortname.txt </div> <!-- This fails to show ellipse for long filenames --> <div> <span>ThisIsMyReallyReallyLongFilename.txt</span> </div> <!-- ... but wraps the text nicely for short names --> <div> <span>Shortname.txt</span> </div> </body> </html>
Improve this question

3 Answers 3

Reset to default
24

Like this? (Note the removal of display:inline-block; from the span.)

<html> <head> <style> div { margin:10px; width:200px; max-width:200px; overflow: hidden; text-overflow:ellipsis; font-size: 1.2em; } span:hover { color:666; cursor:pointer; } </style> </head> <body> <!-- This now does show ellipse for long filenames --> <div> <span>ThisIsMyReallyReallyLongFilename.txt</span> </div> <!-- ... but wraps the text nicely for short names --> <div> <span>Shortname.txt</span> </div> </body> </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

ARGH! I knew I was missing something dumb. I didn't even need that display:inline-block property, it was a left-over from a different design I never removed. (shakes head in shame) Thanks for pointing it out! :-) And thanks to everyone else for their suggestions.
Whew! This saved my day!
I actually needed to add display:inline-block; it didn't work until I did... (suspiciously eyeing vaadin)
2

Move the overflow and text-overflow properties from the div rule to a new rule that targets both div and span. Add a max-width.

<html> <head> <style> div, span { overflow:hidden; text-overflow:ellipsis; max-width:200px; } div { margin:10px; width:200px; font-size:1.2em; } div.a:hover, span:hover { color:#666; cursor:pointer; } span { display:inline-block; } </style> </head> <body> <!-- This works well for long filenames --> <div class="a"> ThisIsMyReallyReallyLongFilename.txt </div> <!-- ... but fails for the short names --> <div class="a"> Shortname.txt </div> <!-- This fails to show ellipse for long filenames --> <div> <span>ThisIsMyReallyReallyLongFilename.txt</span> </div> <!-- ... but wraps the text nicely for short names --> <div> <span>Shortname.txt</span> </div> </body> </html>​
Improve this answer

1 Comment

Hexxagonal's link is jsFiddle is basically the same solution is mine, he just gives the span a 100% width instead of a max width. Same concept though, the span needs a width if it's going to be inline-block.
2

The issue actually comes from having a SPAN with display:inline-block. You're going to need to either remove that or update it to something along the lines of this jsFiddle. I'm unclear exactly what it should be changed to based on the example that you have.

I believe this is occuring because the SPAN will never overflow it's parent DIV. At least that's how the W3 spec states this gets triggered.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.