相关疑难解决方法(0)

是否可以使用CSS将文本长度限制为"n"行(或者在垂直溢出时将其剪切).

text-overflow: ellipsis; 仅适用于1行文本.

原文:

Ultrices natoque mus mattis,aliquam,cras in pellentesque tincidunt
elit purus lectus,vel ut aliquet,elementum
nunc nunc rhoncus placerat urna!坐下来看看!Ut penatibus turpis
mus tincidunt!Dapibus sed aenean,magna sagittis,lorem velit

想要输出(2行):

Ultrices natoque mus mattis,aliquam,cras in pellentesque
tincidunt elit purus lectus,vel ut aliquet,elementum ...

我知道你可以使用CSS规则的组合,当溢出时间(离开父节点)时,文本以省略号(...)结尾.

是否可以(随意说,不)实现相同的效果,但让文本包裹多行？

这是一个演示.

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

正如您所看到的,当文本比div的宽度宽时,文本以省略号结尾.但是,仍然有足够的空间让文本换行第二行并继续.这被white-space: nowrap省略,这是省略号工作所必需的.

有任何想法吗？

PS:没有JS解决方案,如果可能的话纯CSS.

我有一个p特定的width和-tag height.我想用来text-overflow:ellipsis获取...标签中的文字是否太长.这可以用多线文本的css解决吗？

在我的index.html页面中,我想在post.excerpt之后追加'...'.理想化的方法是使用代码{{ post.excerpt |replace_last:'</p>', '……</p>' }},但replace_last似乎没有定义过滤器.那我怎么能在jekyll做到这一点？谢谢.

是否可以创建一个可以在两行后添加省略号并仅在文本换行时显示工具提示的 React 组件？

我尝试使用“noWrap”属性和附加 CSS 自定义 Material UI 的 Typography 组件，但失败了。

请协助，我想实现这样的屏幕：