Hi there,
I have a list og links/buttons which displays text and a count.
However some items break onto a new line, like this:
What I’m wondering is if anyone has any ideas on how to have all items on one line.
I was thinking of having the text fade out at the right hand side and then appear somehow when hovering.
Does anyone have any other ideas or suggestions on how to display items like this?
Thanks!
There are a number of solutions.
Please post the code you have, it would make it easier to advice. 
You could hide the overflow and use text-overflow:ellipsis to truncate the text. Then you would just remove the overflow on hover.
I just knocked this up very roughly in about 1 minute but shows the effect.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
button{
width:130px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
position:relative;
padding:0;
}
button:hover{overflow:visible;border:1px solid transparent;background:transparent;z-index:10;}
button:hover span{background:rgba(0,0,0,0.5);padding:5px 10px;color:#fff;border-radius:4px;}
</style>
</head>
<body>
<button><span>This is some overflowing button text</span></button>
<button><span>This is some overflowing button text</span></button>
<button><span>This is some overflowing button text</span></button>
</body>
</html>
The rest is just window dressing 
Nice and simple! That was my first thought, but I never know for sure…
You’re not on your mobile now, are you.
[/OT]
Thanks for the mockup PaulOB. I’ve tried that which works, but it’s giving the element a width of the longest title and doesn’t add the ellipses.
This is the CSS I have:
.category-groups ul li a{
box-shadow: none;
border-left: 7px solid #f9dc5c;
background: #fdfdfd;
font-size: 16px;
margin-bottom: 15px;
color: #444;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
I’ve tried it adding a width, but the links are set to be responsive. I’ve also tried adding width: 100% which makes it the width of the longest link text.
If the element doesn’t have a width then there can’t be any overflow and thus nothing to truncate?
Try max-width:100%.
Your drawing clearly showed an element of fixed width so I’m a little confused.
There has to be a width (or max-width) imposed somewhere or your text wouldn’t have wrapped in the first place.
I am now :). Back later this evening now.
I see what you mean. The element is inside a wrapper with a fixed width which it is breaking out of.
I’ve tried max-width: 100%, but it still breaks out of the parent 
Sorry for the delay:)
You know by now that an inline element doesn’t obey width don’t you?
If the links are inline elements then you will need to set them to display:inline-block and then they will shrink wrap the content but still obey max-width.
The button element is a replaced element and behaves just like display:inline-block by default which is why the button in my example honours the width (or a max-width).
Here’s an example using an anchor.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
ul{margin:0;padding:0;list-style:none;}
.category-groups{
padding:10px;
max-width:150px;/* for testing*/
margin:auto;
}
.category-groups li{font-size:0;}/* dirty white-space hack*/
.category-groups ul li a{
display:inline-block;
box-shadow: none;
border-left: 7px solid #f9dc5c;
padding:2px;
margin-bottom:16px;
background: #fdfdfd;
font-size: 16px;
color: #444;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
max-width:100%;
text-decoration:none;
}
.category-groups ul li a:hover{overflow:visible;z-index:10;}
</style>
</head>
<body>
<div class="category-groups">
<ul>
<li><a href="#">This is some overflowing text</a></li>
<li><a href="#">This is text</a></li>
<li><a href="#">This is some overflowing text a bit longer</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">This is some text</a></li>
<li><a href="#">This is some overflowing text</a></li>
<li><a href="#">This is some text></a></li>
</ul>
</div>
</body>
</html>
The inner span is only needed if you need to style the overflowing text.
I see now Thank you very much!
I had to set the link to display:block as they were appearing different widths.
The hover works great, but sometimes the text overlaps the counter I have on the right hand side. I’m wondering is it possible to have the hover has a scroll effect that will slowly scroll to the left so it displays the full text to the right?
I’m guessing I will need to set a negative left on hover?
You are contradicting yourself a little there or I misunderstood
I thought you wanted them at different sizes? e.g content size?
If not then display block is fine.
Time for bed now I’ll answer the other part of the question tomorrow.
I think I probably confused myself, I’m good at that.
Thanks for all your help, off to bed too!
I meant to reply to this before I went out but there are a few things you can try if you can’t wait until I get back to a computer.
My first thoughts are to remove the overflow ellipsis on hover and set the text to text-align:right and add a transition so it doesn’t happen immediately.
If that doesn’t work then you could use transform on the span to translate it left with a negative percentage. You will still need to negate the ellipsis on hover.
There’s probably a load of other ways to do this also but those were my first thoughts
Thanks for the reply and the suggestions.
I think the translate on the span would work. I will have a play around and see what I come up with.
Thank you again!
The text-align:right didn’t work but text-indent seems to work ok.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
ul{margin:0;padding:0;list-style:none;}
.category-groups{
padding:10px;
max-width:150px;/* for testing*/
margin:auto;
}
.category-groups li{font-size:0;}
.category-groups ul li a{
display:inline-block;
box-shadow: none;
border-left: 7px solid #f9dc5c;
padding:2px;
margin-bottom:16px;
background: #fdfdfd;
font-size: 16px;
color: #444;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
max-width:100%;
text-decoration:none;
transition: all 1s ease;
}
.category-groups ul li a:hover{
text-overflow:unset;
text-indent:-100%;
transition: all 1s ease;
}
</style>
</head>
<body>
<div class="category-groups">
<ul>
<li><a href="#">This is some overflowing text</a></li>
<li><a href="#">This is text</a></li>
<li><a href="#">This is some overflowing text a bit longer</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">This is some text</a></li>
<li><a href="#">This is some overflowing text</a></li>
<li><a href="#">This is some text</a></li>
</ul>
</div>
</body>
</html>
It doesn’t need the extra span with this method.
It may be better to use an animation instead so that it goes backwards and forwards and doesn’t leave touch users in the hover state.
e.g.
However there may still be an issue for touch users as they would need to touch somewhere else if they wanted to see the message again and of course if these are real links the page may navigate away anyway.
Needs more testing
Hi PaulOB,
Thank you so much for the reply, that looks amazing! I think with mobile, it would be ok as the links become full width so all text would be displayed.
Thank you once again!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.