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

A

admin

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

Code: 
**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.

Code: 
**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

<strong>EDIT with code</strong>
HTML

Code: 
&lt;div class="widget_nav_menu"&gt;&lt;h3&gt;Clinical Materials&lt;/h3&gt;
&lt;div class="materials"&gt;
&lt;ul class="sub-menu"&gt;
&lt;li&gt;&lt;a&gt;&lt;a&gt;link1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;&lt;a&gt;link2 - Coming Soon&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;&lt;a&gt;link3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;&lt;a&gt;link4 - Coming Soon&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;&lt;a&gt;link5 - Coming Soon&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a&gt;&lt;a&gt;link6 - Coming Soon&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;

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

<strong>EDIT</strong> 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

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

Thanks for the help everyone!
 
You must log in or register to reply here.