cacher certaine chaîne de texte et le remplacer par des points de suspension - spectacle sur vol stationnaire

Question

J'ai un menu avec un contenu que notre client n'a pas encore ajouté, voici un exemple d'un 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 

Je voudrais que ce apparaître comme ça.

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

et montrer l'original lorsqu'un élément est plané au-dessus je pense qu'il ya un moyen de tronquer le texte à partir de l'arrière en utilisant seulement css, mais je ne suis pas tout à fait sûr. pourrait avoir besoin de jquery.

merci pour l'aide à l'avance!

EDIT

si quelqu'un qui répond pourrait faire un violon si vous utilisez jquery parce que je ne suis toujours pas ce grand avec java de toute sorte

EDIT avec le 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> 

il n'y a pas de javascript ou css qui se rapporte à ce que je dois faire

EDIT solution beaucoup plus simple pour ce problème. Je supprimé « - coming soon » de tous mes éléments de menu dans le tableau de bord wordpress, puis utilisé cette option pour basculer entre les deux

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

Merci pour l'aide tout le monde!

Answer 1

Est-ce ce que vous cherchez à faire?

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; 
} 

Answer 2

trouvé une solution plus facile avec css simples!

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> 

Pas jQuery nécessaire! Merci pour l'aide les gars