html - 如果文本溢出到 2 行，则添加换行符

Question

我有一个使用 .liquid 和 HTML/CSS 等构建的电子商务网站... 在收藏/类别页面上，我所有的标题都有不同的长度(有些超过 2 行，有些超过 1 行)。

问题是产品标题下方是色样、价格和评论星级，我在桌面上有 4 列。如果标题真的很长，它会将色板/价格和评论元素排成一行，看起来不太讨人喜欢。

如果标题溢出一行，网站是否有任何方法知道，如果不是，则在标题后添加换行符。这样样本/价格/评论总是内嵌的。

这是我网站的屏幕截图以及我的意思。

Answer 1

您还可以通过设置 ma​​x-width 和 ellipsis overflow 来截断标题，如下所示:

title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}