博客列表 >CSS实现超出部分显示省略号

CSS实现超出部分显示省略号

TANKING的代码日志
TANKING的代码日志原创
2022年04月07日 14:55:38699浏览

当文字处于一个容器中,我只想显示一行或者两行,又想表达我还有更多内容的时候,那么可以通过这段CSS代码来是实现,超出部分就自动变为省略号。

显示一行,省略号

  1. /* 显示一行,省略号 */
  2. white-space: nowrap;
  3. text-overflow: ellipsis;
  4. overflow: hidden;
  5. word-break: break-all;

显示两行,省略号

  1. /* 显示两行,省略号 */
  2. text-overflow: -o-ellipsis-lastline;
  3. overflow: hidden;
  4. text-overflow: ellipsis;
  5. display: -webkit-box;
  6. -webkit-line-clamp: 2;
  7. line-clamp: 2;
  8. -webkit-box-orient: vertical;
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议