美文网首页
css文本文字分两行显示,超出用省略号表示

css文本文字分两行显示,超出用省略号表示

作者: 李赫尔南 | 来源:发表于2022-11-12 14:46 被阅读0次

  通过css设置文字强制不换行超出用省略号,css样式代码如下:

{
    white-space: nowrap; //文本强制不换行;
    text-overflow:ellipsis; //文本溢出显示省略号;
    overflow:hidden; //溢出的部分隐藏;
}

  想显示两行,超出用省略号表示,css样式代码如下:

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

   -webkit-line-clamp:用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
   display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  text-overflow: ellipsis;可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

注意:在实际使用中发现,两行显示需要设置合适的 height 属性,否则虽然能出现省略号,但是超出两行的内容也会显示出来

相关文章

  • vue 将一大串文字分两行显示,超出用省略号表示

    众所周知,通过css设置文字强制不换行超出用省略号表示很简单: 但是如果要想显示两行,超出用省略号表示要怎么写呢?...

  • 第十一次课程小结

    DIV高度自适应浏览器高度方法 css 文本两行显示,超出用省略号表示 如果实现单行文本的溢出显示省略号同学们应该...

  • 省略号

    CSS文本超出三行自动隐藏 显示省略号 CSS文本长度超出宽度如何显示省略号

  • CSS3超出文字隐藏

    文字超出显示省略号: css3文字超出多行显示省略号:

  • 强制不换行

    针对一行超出用省略号表示 显示结果 超出两行用省略号表示 同样想要多行省略也是一样,只需后面标签高端改变即可

  • CSS控制文字,超出部分显示省略号

    CSS控制文字,超出部分显示省略号 单行文本溢出(overflow、text-overflow、white-sp...

  • CSS文本超出溢出显示省略号

    先贴一个文字超出后显示省略号的css样式: 单行文字超出显示省略号: 多行文字超出显示省略号: *如果你的项目中装...

  • 2019-06-02—定义两行文本,超出显示省略号

    之前一直用的是一行文本超出显示省略号,突然有一个需求是超出两行文本显示省略号,查了一下,找到答案,不过只被谷歌支持...

  • css 开发常用样式

    下划线 删除线 首行缩进 整段文字两端对齐 css文字超出一行就显示省略号 css文字超出部分,隐藏并显示省略号。...

  • css 文字多行显示超出显示省略号

    css 文字多行显示超出显示省略号 首先,要知道 css 的三条属性。 overflow:hidden; //超出...

网友评论

      本文标题:css文本文字分两行显示,超出用省略号表示

      本文链接:https://www.haomeiwen.com/subject/hqjztdtx.html