我怎样才能隐藏破坏css的溢出？

我创建了一个css，如下所示：

但是当我想应用一个

溢出：隐藏的
（为了在每个单词上有一个省略号）时，它取消了我的风格


我创建了一个演示。我只需将类
溢出
添加到
锚定
，然后应用
溢出：隐藏

我想知道如何保持第一张图片的风格，并且在每个单词上都有一个省略号。
尝试从-.nav ul li a中删除“position:relative”。
我制作了这个css！
不要在标签之前和之后使用

.nav ul li:nth-child(2):before {
z-index: 1;
position: absolute;
top: 0;
left: -15px;
content: '';
width: 0;
height: 0;
display: block;
border-right: 15px solid #FFFFFF;
border-top: 60px solid transparent;
}

  .nav ul li:nth-last-child(2):after {
position: absolute;
z-index: 1;
top: 0;
right: -15px;
content: '';
width: 0;
height: 0;
display: block;
border-left: 15px solid #FFFFFF;
border-bottom: 60px solid transparent;
}