Menu
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>
814
To fix this problem, avoid using vw for your max-width and use a max-width of 100% instead. This will transfer the width of the parent container to the width of the child container.
To add an ellipsis in the HTML <span> element having the CSS overflow property set to “hidden”, you need to add the text-overflow property. Use its “ellipsis” value, which will add dots at the end of the content within the <span>.
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string. Syntax: text-overflow: clip|string|ellipsis|initial|inherit; Property Values: All the properties are described well with the example below.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
