这个很简单,直接贴代码就好了

HTML

<span class="name">博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多</span>

CSS

span{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}

这里用span没用p标签不要有疑问,根据情况来确定使用的标签,

这里是指定两行,超出两行显示省略号

html5文本超过指定行数隐藏显示省略号的更多相关文章

  1. CSS文本超出指定行数省略显示

    单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...

  2. 多行溢出隐藏显示省略号功能的JS实现

    在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...

  3. Vue:列表展开和收起(超过一定行数时显示‘查看更多’按钮)

    前言:前端小白记录的一些小功能~ 公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了 1.首先是css样式,因为设计稿上是超过两行 ...

  4. 文本超过控件长度自动显示省略号的css

    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

  5. css3实现超出文本指定行数(指定文本长度)用省略号代替

    测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  6. css 实现文本换行及显示不下隐藏显示省略号

    CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html   今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...

  7. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  8. .Net_用控制台程序打印指定行数的三角型(面试题)

    .Net_用控制台程序打印指定行数的三角型(面试题)   下面是一个由*号组成的4行倒三角形图案.要求: 1.输入倒三角形的行数,行数的取值3-21之间,对于非法的行数,要求抛出提示“非法行数!”: ...

  9. Linux查看文件指定行数内容

    1.tail date.log               输出文件末尾的内容,默认10行 tail -20  date.log        输出最后20行的内容 tail -n -20  date ...

随机推荐

  1. MR 图像分割 相关论文摘要整理

    <多分辨率水平集算法的乳腺MR图像分割> 针对乳腺 MR 图像信息量大.灰度不均匀.边界模糊.难分割的特点, 提出一种多分辨率水平集乳腺 MR图像分割算法. 算法的核心是首先利用小波多尺度 ...

  2. LeetCode: 520 Detect Capital(easy)

    题目: Given a word, you need to judge whether the usage of capitals in it is right or not. We define t ...

  3. 使用WebStorm/IDEA上传本地项目到GitHub

    在使用 WebStorm/IDEA 上传本地项目到 GitHub 之前,先要做一些相关配置. 以 WebStorm 为例,IDEA 同. 首先打开 WebStorm ,依次点击File -> S ...

  4. npm切换到淘宝镜像

    1. npm简介 1.1.说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等): 1.2.使用npm安装插件:命令提示符执 ...

  5. UVALive 7327【模拟】

    题意: 每次方案一个或多个子序列: 每个子序列要整除m 认为分割不同,子序列边界的不同就是不同: 1246有4个 1246 12 46 124 6 12 4 6 思路: 先从整体考虑,因为取膜适用于加 ...

  6. AutoLayout 根据文字、图片自动计算 UITableViewCell 高度

    原文网址: http://lvwenhan.com/ios/449.html 此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考 ...

  7. StringUtils.split()和string.split()的区别

    场景 出于业务考虑,将多个字符串拼接起来时,使用的分隔符是;,;.如果要将这样一个拼接来的字符串分割成原本的多个字符串时,就需要使用到jdk自带的split()方法.不过因为公司的编程规范,改为使用了 ...

  8. android 多线程下载思路

    首先请求下载url,获取文件大小和文件类型 比如获取到文件大小是7410642  文件类型为application/vnd.android.package-archive(即后缀为apk,安卓app安 ...

  9. gns3 拖出设备显示一个红色的s,无法启动虚拟设备

    通过view-docks-调出console窗口,显示错误信息: Error while creating project: Can't connect to server http://172.0. ...

  10. SqlServer存储过程调用接口

    因项目需求.需实现新增数据->触发器->存储过程->调用接口. https://blog.csdn.net/u010485134/article/details/58603370 另 ...