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

【问题标题】：hide certain string of text and replace with ellipsis - show on hover隐藏某些文本字符串并用省略号替换 - 悬停时显示
【发布时间】：2015-11-11 18:45:07
【问题描述】：

我有一个菜单，其中包含我们的客户尚未添加的一些内容，这是一个菜单的示例：

**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”，然后用它在两者之间切换

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

感谢大家的帮助！

【问题讨论】：

我想你忘记为菜单和 CSS 添加标记了......
您的代码似乎有问题。但是，除非我们有code or information that can reproduce the problem，否则我们无能为力。否则，我们只是在盲目猜测。

标签： jquery html css ellipsis

【解决方案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;
}

【讨论】：

不完全。产品线有不同的长度。我需要剪掉“ - 即将推出” - 从最后开始有 14 个字符，这些字符所在的省略号，并让它们在悬停时重新出现
太棒了。这正是我所需要的。谢谢一堆@user3299574
再想一想，有没有办法让悬停在上面的任何一个来扩展，而不是一次全部扩展？ @user3299574
哦，好吧，这就是“（这个）”的作用。再次感谢！我昨天刚加入 stackoverflow，这已经是一个很大的帮助
感谢您的帮助，但我最终找到了一个非常简单的 CSS 解决方案。你们摇滚

【解决方案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！谢谢大家的帮助

【讨论】：