hide certain string of text and replace with ellipsis - show on hover

Question

I have a menu with some content that our client hasn't added yet, here's an example of one menu:

**CLINICAL MATERIALS – NUTRAFUSE**
Clinical Studies & Articles – Coming Soon
Counseling Sheets – Coming Soon
Prescriber’s Guide – Coming Soon
Rx Pads/Order Forms – Coming Soon
Webinars – Coming Soon

I would like it to appear like this.

**CLINICAL MATERIALS – NUTRAFUSE**
Clinical Studies & Articles...
Counseling Sheets...
Prescriber’s Guide...
Rx Pads/Order Forms...
Webinars...

and show the original when an item is hovered over i think there's a way to truncate the text starting from the back using just css, but i'm not entirely sure. might need jquery.

thanks for help in advance!

EDIT

if anyone who answers could make a fiddle if using jquery because i'm still not that great with java of any kind

EDIT with code HTML

<div class="widget_nav_menu"><h3>Clinical Materials</h3>
<div class="materials">
<ul class="sub-menu">
<li><a><a>link1</a></li>
<li><a><a>link2 - Coming Soon</a></li>
<li><a><a>link3</a></li>
<li><a><a>link4 - Coming Soon</a></li>
<li><a><a>link5 - Coming Soon</a></li>
<li><a><a>link6 - Coming Soon</a></li>
</ul>
</div>
</div>

there isn't any javascript or css that pertains with what i'm needing to do

EDIT much simpler solution for this issue. I deleted " - coming soon" from all my menu items in the wordpress dashboard, then used this to switch between the two

.coming-soon:after {
content: '...';
}
.coming-soon:hover:after {
content:' - Coming Soon'
}

Thanks for the help everyone!

I think you forgot to add the markup for the menu and the css you have so far.... — rene, Aug 18 '15 at 17:35
It seems you have a problem with your code. However, we can't help unless we have [code or information that can reproduce the problem](http://stackoverflow.com/help/mcve). Otherwise, we are just blindly guessing. — gunr2171, Aug 18 '15 at 17:36

wizloc · Answer 1 · 2015-08-18T18:00:12.387

0

Is this what you are looking to do?

https://jsfiddle.net/cshanno/y3kx7dqj/3/

HTML

    <div class="container">
    <h1>**CLINICAL MATERIALS – NUTRAFUSE**</h1>
    <p>Clinical Studies & Articles <span class="comingsoon">...</span></p>
    <p>Counseling Sheets <span class="comingsoon">...</span></p>
    <p>Prescriber’s Guide <span class="comingsoon">...</span></p>
    <p>Rx Pads/Order Forms <span class="comingsoon">...</span></p>
    <p>Webinars <span class="comingsoon">...</span></p>
</div>

JQUERY

$('.container').hover(function(){
    $('.comingsoon').text('- Coming Soon');
}, function(){
    $('.comingsoon').text('...');
});

CSS

.container {
    text-align:center;
    width:500px;
    border: 1px solid black;
}

edited Aug 18 '15 at 18:00

answered Aug 18 '15 at 17:47

wizloc

2,202
4
28
54

not quite. the product lines have different lengths. i need to cut out " - coming soon" - so 14 characters from the end, an ellipsis where those characters were, and make them reappear on hover – homsAU Aug 18 '15 at 17:53
awesome. this is exactly what i needed. thanks a bunch @user3299574 – homsAU Aug 18 '15 at 18:18
on second thought, is there a way to get whichever one is hovered over to extend and not all of them at once? @user3299574 – homsAU Aug 18 '15 at 18:21
ohhh ok so that's what "(this)" does. thanks again! i just joined stackoverflow yesterday and it's already been a great help – homsAU Aug 18 '15 at 18:32
thanks for your help but i ended up finding a pretty simple solution with css. you guys rock – homsAU Aug 18 '15 at 19:09
add it as an answer to your own question – wizloc Aug 18 '15 at 19:13

score 0 · Answer 2 · answered Aug 18 '15 at 21:44

found an easier solution with simple css!

CSS

.coming-soon {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coming-soon a:after {
content: '...';
}
.coming-soon:hover a:after {
content: ' - Coming Soon';
white-space: initial;
color: #407db0;
}

HTML

<div>
<h3>Clinical Materials – Derm</h3>
<div>
<ul class="menu">
<li class="coming-soon"><a></a></li>
<li class="coming-soon"><a>Counseling Sheets</a></li>
<li class="coming-soon"><a>Prescriber’s Guide</a></li>
<li class="coming-soon"><a>Rx Pads/Order Forms</a></li>
</ul></div></div>

No jQuery needed! Thanks for the help guys

hide certain string of text and replace with ellipsis - show on hover

2 Answers2

Linked