Question

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

当链接太长时，你可以在菜单架中水平滚动，这很难看！

是否有人可以告诉我如何将这些链接缩短为最多16个字符并以＃{1}}

结尾

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

提前致谢。

Answer 1

以下是一个示例：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>

Answer 2

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

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

MDN docs: text-overflow

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

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

2 个答案: