隐藏某些文本字符串并替换为省略号-在悬停时显示

Question

我有一个菜单，其中一些内容我们的客户端还没有添加，下面是一个菜单的例子:

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

我希望它看起来像这样。

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

并在项目悬停时显示原始内容我认为有一种方法可以截断文本从后面开始使用css，但我不完全确定。可能需要jquery。

提前感谢您的帮助!

编辑

如果有人回答可以让小提琴如果使用jquery，因为我仍然不擅长任何类型的Java

编辑代码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>

没有任何javascript或CSS与我需要做什么有关

EDIT这个问题更简单的解决方案。我从wordpress仪表板的所有菜单项中删除了"-即将到来"，然后用它在两个

之间切换。

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

谢谢大家的帮助!

Answer 1

这是你想要做的吗?

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

找到了一个简单的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>

不需要jQuery !谢谢大家的帮助