通过CSS处理大的文本字符串、截断或隐藏，哪种方式更优雅？

Question

我目前在一个视频网站上工作，很多标题都比正常的长度要长。如果标题超过2行，页面布局将中断。这发生在网站上的许多不同的地方。

通过布局破坏，我的意思是，它看起来很混乱，不对称，事情不对准。那么，处理这些长字符串的更好方法是什么呢？如果我使用截断，那么几乎所有的东西似乎都被截断了，我有那些"...“在万物的末尾。

另一方面，设置固定的高度并使用overflow hidden看起来更好，但它显然没有告诉用户标题还有更多内容，并突然结束。你们觉得哪种选择更好呢？

Answer 1

我过去做过的一件事是使用渐变图像(或跨度上的CSS3渐变)，并将其绝对定位在它的右端，这样单词在接近末尾时就会淡出。

除此之外，我经常放一个点击事件来展开点击或悬停或其他东西，以显示标题的其余部分。有时我会做一个工具提示，有时我会展开文本本身...这取决于设计。

但我发现梯度的东西让你知道有更多，而不是太难看。

希望这能有所帮助。

Answer 2

这是非常主观的，但我认为YouTube所做的就是一个很好的例子。您将看到，使用YouTube时，不能设置长度超过100个字符的标题。对我来说，这是一个更优雅的解决方案，而不是截断和附加'...‘或者使用overflow (因为这是令人讨厌的IMO)。

Answer 3

您可以通过字符数对其进行服务器限制，也可以设置css overflow:hidden。

理想情况下，如果可能，我会将其限制在输入点，为标题输入设置一个最大长度