多行文字只显示一行,其它隐藏并显示为...;多行文字只显示前两行,其它隐藏并显示为...

Posted xuwennn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多行文字只显示一行,其它隐藏并显示为...;多行文字只显示前两行,其它隐藏并显示为...相关的知识,希望对你有一定的参考价值。

①多行文字只显示一行,其它隐藏并显示为..

.text {
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;    //不换行
    text-overflow: ellipsis;    //超出部分以省略号显示
    overflow: hidden;           //超出部分隐藏
  }

-------------------------------------------------------------------------------------------------------------------------------

②多行文字只显示前两行,其它隐藏并显示为...

.text {
    font-size: 13px;
    line-height: 1.5;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

以上是关于多行文字只显示一行,其它隐藏并显示为...;多行文字只显示前两行,其它隐藏并显示为...的主要内容,如果未能解决你的问题,请参考以下文章

CSS一行/多行显示 超出隐藏

CSS一行/多行显示 超出隐藏

Vue3中文本只显示三行,超过部分在文字后显示省略号和展开按键

关于Oracle,在一行中个别字段多行显示。

Excel隐藏多行,如何一次全部展开显示或取消隐藏

使用文本区域在多行中显示文本[重复]