缩短左侧菜单中的菜单链接

Shorten menu links in left-side menu

本文关键字：菜单 链接      更新时间：2023-09-26

我正在建立一个左侧菜单的网站。在每个媒体查询中，菜单的宽度为200px。我们的客户可以使用我们的CMS添加页面，有时使用很长的菜单项名称。

当链接太长时，你可以在菜单栏中水平滚动。

有没有人可以告诉我如何缩短这些链接到最多16个字符，并使他们结束:...

当然也欢迎其他解决方案!

您可以使用CSS单独使用text-overflow: ellipsis属性来解决此问题。试试这个:

li {
    text-overflow: ellipsis;
    overflow: hidden; /* this must be anything other than visible */
}

MDN docs: text-overflow

您可能还需要在元素上设置width，但这取决于您的HTML结构。

这里是一个例子:ul菜单中的缩写名称与全称标题

window.onload = function(){
var names = document.getElementById('names');
var name = names.getElementsByTagName('li');
for(var i = 0 ; i< name.length ; i++){
name[i].title = name[i].textContent;
if(name[i].textContent.length > 16){
name[i].textContent = name[i].textContent.substring(0,16)+'...';
}
}
}
ul{
padding:0;
width:200px;
}
li{
text-align:center;
display:block;
padding:10px;
font-size:20px;
border-bottom:solid 2px orange;
color:orange;
word-wrap:break-word;
cursor:default;
}
<ul id="names">
<li>Ahmed saeed Ali Mustafa Mohamed</li>
<li>Mamdouh Mustafa</li>
<li>Ali Mohamed Hussien</li>
<li>Mohamed Abu-trika</li>
<li>Yasser Yousef</li>
</ul>

相关文章：