带有省略号的CSS文字换行

马克·罗宾斯

仅使用CSS,当容器垂直填充时,我既希望自动换行,也希望省略号。根据研究,如果white-space: nowrap只有- ,我只能有省略号

上下文是具有已知高度和可变宽度的父div,a如果不位于,子元素应始终垂直居中max-height: 100%

如果display: table在父级中指定了display: table-celland max-height: xxx,则text-overflow: ellipsis在子级中似乎应该可以使用。

我认为这不是很多问题,但是已经很晚了,我可能会遗漏一些东西。有一个名为的网站still-cant-be-done-in-html5.com吗?

小提琴

和赫伯特

有一个仅用于webkit的功能,称为“线夹”,可以实现我认为您正在寻找的功能。不幸的是,它是非标准的,并且目前没有计划(至少我知道)使其成为任何标准的一部分。

https://css-tricks.com/line-clampin/

使用以下CSS可以实现:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

使用此代码,如果元素的内容用文本填充了3行以上,则将在第三行上用省略号将其截断。

有几种不同的JavaScript库试图完成相似的工作,您可以在我包含在此答案中的链接中看到这些库。不幸的是,使用标准CSS,文本溢出:省略号仅限于一行。

或者,当前在W3C邮件列表中一个关于“区域片段”的主题,以及如何使用它们使多行元素带有省略号,但是该规范仍处于起草阶段,可能要花很多年才能将其纳入任何内容。浏览器。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档