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与我需要做的事情相关

编辑这个问题的解决方案简单得多。我从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！感谢帮助人员

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

2 个答案: