css怎么让第二行内容显示不下的时候自动省略号!

单纯的css只能实现一行显示不下的时候显示省略号,如果是多行的话,就需要用js实现了。
css怎么让第二行内容显示不下的时候自动省略号!
<!DOCTYPE html><html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>RunJS 演示代码</title><style>.content{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}</style> </head><body> <div>你好,你好,你好,你好,你好,你好,你好,你好, </div><div class='content'>你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,</div> </body></html>2015-09-18
  单纯的css只能实现一行显示不下的时候显示省略号,如果是多行的话,就需要用js实现了。2015-09-18
white-space: initial;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
2018-03-29
mengvlog 阅读 8 次 更新于 2025-07-20 04:02:23 我来答关注问题0
  • 具体来说,首先应用overflow:hidden,文本超出范围将被隐藏。接着,使用text-overflow:ellipsis以省略号形式显示超出部分。由于white-space:nowrap不支持多行文本,因此不需要将其包含在内。引入css3后,将对象设为弹性伸缩盒子模型使用display:-webkit-box,这使得元素可以被垂直排列。设置-webkit-box-orient...

  •  翡希信息咨询 CSS:限制在一个块元素显示的文本的行数

    要限制一个块元素中的文本行数,可以使用以下几种CSS方法:使用webkitlineclamp属性:该属性可用于限制文本显示的行数,但它是非标准的,主要被WebKit内核的浏览器支持。示例:要限制文本最多显示两行,可以结合使用webkitlineclamp: 2;、display: webkitbox;和webkitboxorient: vertical;。使用textoverflow...

  • 单纯的css只能实现一行显示不下的时候显示省略号,如果是多行的话,就需要用js实现了。

  •  文暄生活科普 CSS:限制在一个块元素显示的文本的行数

    另一种解决方案是使用文本溢出处理。通过设置text-overflow属性为"...",可以确保在文本过多时以省略号的形式隐藏超出的部分,这样可以限制显示在一行内的文本。对于只显示一行的情况,可以采用overflow: hidden属性。这个属性会将内容修剪,超出部分的内容将不可见,从而达到限制文本行数的目的。但请注意,...

  •  翡希信息咨询 css超出两行显示省略号有什么办法?

    CSS实现超出两行显示省略号的方法如下:使用overflow和textoverflow属性:设置元素的overflow属性为hidden,以隐藏超出容器的内容。使用textoverflow属性,并设置其值为ellipsis,使超出部分以省略号形式表示。设置display属性并使用webkitlineclamp:将display属性设置为webkitbox。使用webkitlineclamp属性来指定显示的...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部