Javascript 根据设备宽度向面包屑添加尾部省略号

在我的用户界面上，我有一个面包屑，它显示在顶栏上。当设备宽度低于定义的宽度时，它将下降到顶部栏下方，成为它自己的栏，但是我不知道如何在面包屑长度大于设备宽度时添加尾部省略号

面包屑示例：

<nav>
    <ul>
        <li>Home</li>
        <li>>></li>
        <li>User</li>
        <li>>></li>
        <li>Inbox</li>
        <li>>></li>
        <li>Mail_ID</li>
    </ul>
</nav>

家
>>
使用者
>>
收件箱
>>
邮件ID

注意：

表示

i

标记中的图标

当面包屑大于设备宽度时，我能描述的最好情况如下所示：

• 主页>>用户>>收件箱>>邮件ID
• 。。。用户>>收件箱>>邮件ID
• 。。。收件箱>>邮件ID
• 。。。邮件ID

---

您可以尝试只使用CSS省略号，但我不知道它是否也适用于

。当然，它适用于简单字符串：

使用以下HTML：

<ul class="ellipsis">

您可以尝试只使用CSS省略号，但我不知道它是否也适用于
。当然，它适用于简单字符串：

使用以下HTML：

<ul class="ellipsis">

这仍然是部分代码，但可能会对您有所帮助

主意

在加载时，调用一个函数，该函数检查
ul
的类型及其父容器
如果
ul
的宽度更大，则隐藏前2个可见
li
。另外，添加一个
li
作为省略号，使其最初隐藏，并使其仅在隐藏任何其他div时可见
递归地重复这个过程，你就会得到你想要的东西

样本


$（函数（）{
$（“.content”）.resizeable（）；
$（“.content”）。在（“调整大小”，函数（）上）{
var ul=$（this.find（'ul'）；
如果（ul.width（）>$（this.width（））{
var lis=ul.find（'li:not（.hide）：not（.省略号）'）；
对于（变量i=0；i<2；i++）{
$（lis[i]）.addClass（“隐藏”）；
}
if（$（“.省略号”）.not（“：visible”））
$（“.省略号”）.removeClass（“隐藏”）
}
})
});
.content{
文本对齐：左对齐；
边框：1px纯色灰色；
宽度：300px；
高度：40px；
最大高度：40px；
}
.内容ul{
填充：0px；
位置：固定；
溢出：隐藏；
空白：nowrap；
}
.李国宝{
显示：内联块；
文字装饰：无；
}
.隐藏{
显示：无！重要；
}



家
>>
使用者
>>
收件箱
>>
邮件ID

这仍然是部分代码，但可能会对您有所帮助

主意

在加载时，调用一个函数，该函数检查
ul
的类型及其父容器
如果
ul
的宽度更大，则隐藏前2个可见
li
。另外，添加一个
li
作为省略号，使其最初隐藏，并使其仅在隐藏任何其他div时可见
递归地重复这个过程，你就会得到你想要的东西

样本


$（函数（）{
$（“.content”）.resizeable（）；
$（“.content”）。在（“调整大小”，函数（）上）{
var ul=$（this.find（'ul'）；
如果（ul.width（）>$（this.width（））{
var lis=ul.find（'li:not（.hide）：not（.省略号）'）；
对于（变量i=0；i<2；i++）{
$（lis[i]）.addClass（“隐藏”）；
}
if（$（“.省略号”）.not（“：visible”））
$（“.省略号”）.removeClass（“隐藏”）
}
})
});
.content{
文本对齐：左对齐；
边框：1px纯色灰色；
宽度：300px；
高度：40px；
最大高度：40px；
}
.内容ul{
填充：0px；
位置：固定；
溢出：隐藏；
空白：nowrap；
}
.李国宝{
显示：内联块；
文字装饰：无；
}
.隐藏{
显示：无！重要；
}



家
>>
使用者
>>
收件箱
>>
邮件ID

是否会
溢出：隐藏
不会将文本隐藏到右侧？啊，当然。他想从头开始，而我则展示如何在结尾隐藏。这是两个完全不同的东西。溢出：隐藏不隐藏文本到右侧？啊，当然。他想从头开始，而我则展示如何在结尾隐藏。这是两件完全不同的事情。这正是我想要的，非常感谢。我只需要在最后一个
li
中添加一个尾随省略号，如果它是唯一的一个，并且不能放在上面，否则一个空的面包屑就不会这么有用了！这正是我想要的，非常感谢。我只需要在最后一个
li
中添加一个尾随省略号，如果它是唯一的一个，并且不能放在上面，否则一个空的面包屑就不会这么有用了！