在CSS中，将超出文本部分显示为省略号是一种常见的文本截断技术，它可以帮助保持布局的整洁，尤其是在有限的空间内展示长文本时。要实现这个功能并确保在Firefox浏览器中兼容，我们可以采用以下方法：
我们需要设置元素的`overflow`属性为`hidden`，这将隐藏超出容器范围的内容。接着，我们将`white-space`属性设置为`nowrap`，阻止文本换行，确保所有文本都在同一行内。
```css
element {
overflow: hidden;
white-space: nowrap;
}
```
然后，为了实现省略号的效果，我们需要使用`text-overflow`属性。`text-overflow`属性告诉浏览器如何处理被`overflow`隐藏的文本。当`text-overflow`值为`ellipsis`时，它会在文本末尾添加一个省略号。
```css
element {
text-overflow: ellipsis;
}
```
然而，Firefox浏览器对`text-overflow`的支持有一些特殊性。在Firefox中，我们需要结合使用`-moz-binding`和XUL来实现，但这通常不建议，因为这种方式存在安全风险和兼容性问题。一个更实用的解决方案是通过调整元素的宽度和浮动属性来模拟效果。
```css
/* Firefox only */
element {
max-width: some-value;
float: left;
}
element:after {
content: "...";
float: left;
width: some-value;
padding-left: some-padding;
color: color-of-ellipsis;
}
```
在这个示例中，我们创建了一个伪元素`:after`，并在其中添加了省略号内容。通过调整`max-width`和`width`属性，我们可以控制显示多少文本，以及省略号的位置。`padding-left`用于设置省略号与文本之间的距离，`color`则定义省略号的颜色。
在给出的代码片段中，可以看到这些技术的应用。`li:not(p)`选择器用于区分列表项和段落，避免在不合适的元素上应用样式。`li a`元素的样式中包含了`overflow: hidden`、`white-space: nowrap`和`text-overflow: ellipsis`，而在Firefox兼容性部分，通过`max-width`、`float`和`:after`伪元素实现了省略号效果。
通过这种方式，可以确保在Firefox和其他支持`text-overflow: ellipsis`的浏览器中，超出部分的文本都能正确地以省略号的形式呈现。不过，这种方法不适用于多行文本的截断，对于多行文本的省略号展示，可能需要使用CSS Flexbox或Grid等现代布局技术，或者使用JavaScript进行辅助处理。
