当前位置: 首页 > 知识库问答 >
问题:

css样式 - 如何实现文本多行显示限制,并在第二行添加省略号?

小牛22977
2024-09-29

无论字符多少,最多显示俩行,字数超出俩行,第二行行首用省略号显示,不足俩行的,显示全部字符。
如下

共有1个答案

尉迟德惠
2024-09-29

为啥是省略中间的内容,而不是省略末尾的内容?

如果是省略末尾的内容的话,就直接用下面这段CSS样式组合就可以实现了。

text-truncate {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
}

CSS 中的文字超出省略_- CodePen

 类似资料:
  • 问题内容: 第二行的CSS ,这可能吗?我在网上找不到。 例: 我想要的是这样的: 但这是怎么回事: 问题答案: 工作要求是(,等)的单行版本。这意味着文本永远不会到达第二行。 嗯 在纯CSS中不可能。 编辑 如果优秀的CSS众神将实现我们可以使用(new)和(new)在纯CSS中进行模糊处理。 编辑2 WebKit / Blink具有:将省略号放在第二行。

  • 本文向大家介绍如何实现多行元素的文本省略号?相关面试题,主要包含被问及如何实现多行元素的文本省略号?时的应答技巧和注意事项,需要的朋友参考一下 参考回答:

  • 问题内容: 是否有解决方案,以div的最后一行在流体高度(20%)处添加省略号? 我在CSS中找到了该函数,但在我的情况下,行号取决于窗口大小。 问题答案: 如果要将省略号(…)应用于一行文本,CSS可以通过该属性使此操作变得容易。仍然有些棘手(由于所有要求,请参阅下文),但使之成为可能且可靠。 但是,如果要在多行文本上使用省略号(如此处的情况),那么不要指望有什么乐趣。CSS没有执行此操作的标准

  • 我一直在使用空格:不换行,文本溢出:省略号和溢出:隐藏的CSS属性为多行文本创建省略号截断。但是,这在使用弹性框时不起作用。 使用flex时,text-overflow:省略号似乎总是将flex项的高度截断为一行。 对于多行文本,是否可以使用flex和css省略号截断的组合? 我可以让它在单行截断的情况下工作。手动设置高度与flex空格:nowrapp不起作用。

  • 本文向大家介绍实现单行文本居中和多行文本左对齐并超出显示"..."相关面试题,主要包含被问及实现单行文本居中和多行文本左对齐并超出显示"..."时的应答技巧和注意事项,需要的朋友参考一下 单行文本居中。在 内核中适用。非 内核,可以是用 js 或者用 模拟。 多行文本左对齐。多行文本没有很好的解决方法,只能依赖 js 或者 css 的相对定位。 示例代码:https://codepen.io/Ko

  • 本文向大家介绍微信小程序实现多行文字超出部分省略号显示功能,包括了微信小程序实现多行文字超出部分省略号显示功能的使用技巧和注意事项,需要的朋友参考一下 在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来也不太美观。 这时候我们就需要一个功能:比如设置