CSS - 自定义选择文本溢出

Question

我想在 HTML 中使用 CSS only 进行自定义选择。所以我在选择周围做了这个技巧，以便有一个自定义箭头 (View here)。

我想将选择的文本溢出设置为“省略号”。但现在长选项与我的自定义箭头重叠。有没有办法限制最大值。选择的文本宽度，以便省略号在我的自定义箭头之前？

PS：我正在使用 Firefox，我只想为此使用 CSS。所以请不要在JS中解决。

提前致谢

Answer 1

这应该会有所帮助：

.truncate {    
    max-width: TRUNCATION-BOUNDARY;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Fiddle

因此，在您的情况下，只需将 max-width 设置为 90%（甚至更少），这样它就不会再与您的箭头重叠了。