0

0

css之多行文本输出

高洛峰

高洛峰

发布时间:2016-11-16 10:14:50

|

1886人浏览过

|

来源于php中文网

原创

看到简介标注为只能显示3行文本,多于3行显示3行,本准备采取字符串截取蒙混过关(不能原谅的事情是对自己没有要求,简直没有下限),后查看了网上的解决方案,特此分享。

思路

现在假设想要显示的文本行数是N行,首先设定文本容器的max-height = N 乘以 line-height,第N行显示的文本为部分文本 + ... + 展开全部。设置文本容器的字体颜色为背景色,伪元素before和after的content都为文本内容。借助伪元素before显示(N - 1)行元素,z-index = 1(在文本容器、before伪元素、after伪元素、[展开全部]按钮中确保before伪元素z-index最大)。after伪元素的padding-right宽度为[展开全部]按钮的宽度(单位为em),text-indent = (N - 1) * [展开全部]按钮的宽度(如何理解缩进? 通过设置after伪元素的padding-right为第N行的[展开全部]按钮留位置,由于第1行、第2行...第(N - 1)行都少显示[展开全部]按钮宽度的字体,所以,为了确保伪元素after在第N行中显示正确,需要向左缩进(N - 1) 乘以 [展开全部]按钮的宽度)

效果图

wKioL1gquUnA2iquAADM6BeOegg095.png-wh_651x-s_3494154119.png

空心菜的米库
空心菜的米库

1,对界面进行了美化2,对文件里边相同代码进行了综合3,增加了点击次数统计,并对3次点击以上的域名增加热门字样4,对本站出售和个人出售进行了划分5,增加钻石状态说明6,增加了完整的后台界面7,增加对资料修改功能8,增加回收站,可以任意删除域名、恢复删除域名和永久删除数据9,还有其他的细节大家自己看~10.增加域名证书显示11.域名到期时间采用日历控件形式12.后台登陆添加了验证码功能13.还有很多

下载

立即学习前端免费学习笔记(深入)”;

完整代码

Jennifer Joanna Aniston (born February 11, 1969)[1] is an American actress, producer, and businesswoman.[2] The daughter of Greek actor John Aniston and American actress Nancy Dow, Aniston gained worldwide recognition for portraying Rachel Green on the popular television sitcom Friends (1994–2004), a role which earned her a Primetime Emmy Award, a Golden Globe Award, and a Screen Actors Guild Award. The character was widely popular during the airing of the series and was later recognized as one of the 100 greatest female characters in United States television
.desc {
  position: relative;
  width: 400px;
  /*用像素表示,不要用em,以免造成不同浏览器下计算出现小数点取舍不同导致1像素的差距【行高*截取行数】*/
  overflow: hidden;
  max-height: 72px;
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  word-wrap: break-word;
  /*强制打散字符*/
  word-break: break-all;
  background: #fff;
  /*同背景色*/
  color: #fff;

  &:after,
  &:before {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /*实际文本颜色*/
    color: #000;
  }
  &:before {
    display: block;
    overflow: hidden;
    /*显示在最上面,展示前面的(截取行数-1)行字符*/
    z-index: 1;
    /*根据行高和截取行数调整,值为[(截取行数-1)*行高]*/
    max-height: 48px;
    /*同背景色*/
    background: #fff;
  }
  &:after {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*截取行数*/
    -webkit-line-clamp: 3;
    /*行首缩进字符数,值为[(截取行数-1)*尾部留空字符数]*/
    text-indent: -8em;
    /*尾部留空字符数*/
    padding-right: 4em;
  }
  button {
    width: 40px;
    height: 20px;
    font-size: 12px;
    padding: 0;
    outline: 0;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

相关专题

更多
java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

20

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

5

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

27

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

2

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

3

2026.01.15

php图片上传教程汇总
php图片上传教程汇总

本专题整合了php图片上传相关教程,阅读专题下面的文章了解更多详细教程。

2

2026.01.15

phpstorm相关教程大全
phpstorm相关教程大全

本专题整合了phpstorm相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.15

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

16

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.6万人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.7万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号