html - 通过 CSS 处理大字符串、截断或隐藏的更优雅的方法是什么？

Question

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

我的意思是布局破坏，它看起来很乱，不对称，东西排列不正确。那么处理这些长字符串的更好方法是什么。如果我使用截断，那么几乎所有内容似乎都会被截断并且我有那些“...”在一切的结尾。

另一方面，设置固定高度并使用溢出隐藏看起来更好，但它显然没有告诉用户标题还有更多内容并突然结束。那么你们认为更好的选择是什么？

Answer 1

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

除此之外，我经常放置某种点击事件以在点击或悬停时展开或显示标题的其余部分。有时我做一个工具提示，有时我扩展文本本身……取决于设计。

但我发现渐变的东西可以让你知道还有更多，而且不会太难看。

希望对您有所帮助。