前言

有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢?

解决办法

我们完全可以使用css来解决这一需求

1. 解决文本显示行数

word{
display:-webkit-box // 使其变为伸缩盒
-webkit-line-clamp:2 // 设置其要显示的行数
-webkit-box-orient:vertical // 规定子元素的排列方式
}

2. 隐藏剩余部分

word{
display:-webkit-box // 使其变为伸缩盒
-webkit-line-clamp:2 // 设置其要显示的行数
-webkit-box-orient:vertical // 规定子元素的排列方式
width:100%;
overflow:hidden;
text-overflow:ellipsis;
}

注意:当我们设置了display:-webkit-box,那么-webkit-line-clamp和-webkit-box-orient:vertical属性是必须的!!!

更新于2019-10-11

其中-webkit-line-clamp就是控制行数的,是3就是显示3行,3行结束点点点,如果是2则最多2行。

进一步了解box-orient属性

使用css控制文字显示几行并且剩余部分隐藏(移动端和PC端同样适用)的更多相关文章

  1. CSS控制文字显示一行,超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  2. css让文字显示特定行数,多余的显示省略号

    /*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...

  3. css控制文字显示长度,超过用省略号替代

    .line_text { width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } <span cl ...

  4. css 控制文字显示两行,多余用省略号 手机端

    p { width:100px; position:relative; line-height:20px; /*行高为高度的一半,这样就是两行*/ height:40px; overflow:hidd ...

  5. 纯css控制文字2行显示多余部分隐藏

    在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

  6. css控制文字长度,超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  7. 2016/04/13 ①html 中各种分割线------------------------------------------ ② 控制文字显示

    ①各种分割线Html代码 1.<HR> 2.<HR align=center width=300 color=#987cb9 SIZE=1>align 线条位置(可选left. ...

  8. css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  9. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. Markdown编辑器开发记录(一):开发的初衷和初期踩的坑

    先说下选择Markdown编辑器的原因,我们进行平台开发,需要很多的操作手册和API文档,要在网站中展示出来就需要是HTML格式的文件,但是由于内容很多,不可能全部由技术人员进行文档的编写,如果是只有 ...

  2. Maven将中央仓库修改为阿里云的仓库地址

    <mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorOf> <name>Nexu ...

  3. 看Linux 之父是如何定义 Linux?

    看Linux 之父是如何定义 Linux? LINUX是什么? LINUX是一个免费类unix内核,适用于386-AT计算机,附带完整源代码.主要让黑客.计算机科学学生使用,学习和享受.它大部分用C编 ...

  4. 如何征服面试官,拿到Offer [转]

    转自 https://my.oschina.net/cccyb/blog/3012768 又到了茶余饭后的时间,想想写点什么,掐指一算,噢呦,快到3月份了,职场的金三银四跳槽季又来了,不同的是今年比往 ...

  5. linux stat 查看文件的详细信息

    linux stat查看文件详细信息 [root@oldboy01 tmp]# stat /tmp/1.cc File: `/tmp/1.cc' Size: 4 Blocks: 8 IO Block: ...

  6. OpenCV遍历彩色图像、灰度图像的像素值方法

    https://blog.csdn.net/mooneve/article/details/53001677 应用:将彩色图像转为灰度图像输出 方法一 使用ptr函数和指针 (高效) void mai ...

  7. P2678 跳石头题解

    #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> #i ...

  8. Java消息队列——JMS概述

    一.什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...

  9. python:利用logbook模块管理日志

    日志管理作为软件项目的通用部分,无论是开发还是自动化测试过程中,都显得尤为重要. 最初是打算利用python的logging模块来管理日志的,后来看了些github及其他人的自动化框架设计,做了个比对 ...

  10. 一次linux服务器黑客入侵后处理

     场景: 周一上班centos服务器ssh不可用,web和数据库等应用不响应.好在vnc可以登录 使用last命令查询,2号之前的登录信息已被清空,并且sshd文件在周六晚上被修改,周日晚上2点服务器 ...