裁剪元素内的文本

Question

这个想法是减少文本长度以适应特定大小的框，并在末尾添加“...”。盒子是单行的。

我在网上找到的解决方案似乎遵循相同（且不正确）的想法，我原本不得不以字符数为基础。如果元素使用变体宽度字体（大多数常规Web字体都是），这当然会失败。

所以我的下一个想法是在CSS后面给容器

white-space: pre;
overflow-x: hidden;

好的，这要好得多，但现在我无法将其与字符数量相关联（裁剪文字并添加点数）。

任何人都有任何想法如何打败这个完整的解决方案？或者可能是完全不同的东西？

Answer 1

我会看text-overflow: ellipsis。

Answer 2

我认为您可能必须使用的技术（这很难看）是在某处创建一个隐形或屏幕外的跨度。您可以为其添加字符并测量其宽度和高度，直到它们位于您想要的位置。然后你的跨度的内容是你应该将字符串减少到的。

是的，这太丑了。

Answer 3

嗯，除了maxl0rd的回答，你可以试着解决它。您使用overflow: hidden描述的方法，但在其右侧添加另一个容器，其中包含3个点。像：

+C1--------+C2---+
| some tex | ... |
+----------+-----+

风险是有时最后一封信可能会被截止，但也许这并不是那么糟糕。你可以在它们之间叠加一点渐变，使它不那么明显。