【问题标题】:Are there any alternatives for "-webkit-box-orient"“-webkit-box-orient”有什么替代品吗
【发布时间】:2020-10-27 02:30:06
【问题描述】:

-webkit-box-orient 有什么替代品吗?

我需要它用于以下课程:

.max-2-lines{
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

但是我可以看到 here 只有少数浏览器支持该属性

【问题讨论】:

  • @Paulie_D 你能解释一下你的意思吗?

标签: css text browser cross-browser


【解决方案1】:

实际上您正在使用line-clamp 实现,需要使用-webkit-box-webkit-box-orient

在不久的将来,您将只需要使用line-clamp 属性:

line-clamp 属性是max-linesblock-ellipsiscontinue 属性的简写。

它允许将块容器的内容限制为指定的行数;剩余的内容被分割掉,既不渲染也不测量。可选地,它还允许在最后一行框中插入内容以指示截断/中断内容的连续性。 ref

您也可以查看Legacy compatibility 部分了解更多信息

【讨论】:

  • 所以为了只有(示例)2行,我应该只有一个line-clamp: 2?能否请您提供一个小例子?
  • @Berto99 不幸的是,支持仍然很低,我认为没有任何浏览器正在实现这一点。该规范也处于草稿模式。实际上,您拥有的唯一方法就是您正在使用的代码。
  • 现在它解释了为什么我不能让它工作啊谢谢你
  • 我将在不久的将来等待其他答案,如果没有更多答案将发布,我将其标记为正确,再次感谢您
  • @Berto99 是的,当然,不急于接受,有人可能会提供更多信息和另一种技术
猜你喜欢
  • 2013-01-16
  • 2019-12-31
  • 1970-01-01
  • 2020-06-20
  • 1970-01-01
  • 1970-01-01
  • 2023-03-07
  • 1970-01-01
  • 2022-11-10
相关资源
最近更新 更多