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

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. Oracle 11g client 安装

    本文所有红色字体标注的为本人计算机安装方法(Oracle 11g安装在本地 Oracle 11g client 也是安装在本地 如果情况一致 可参照本人方法安装) Oracle 11g client ...

  2. c++指针参数是如何传递内存的

    参数策略 如果函数的参数是一个指针,不要指望用该指针去动态申请内存.如下: void GetMemory(char *p, int num) { p = (char *)malloc(sizeof(c ...

  3. vue中使用chart.js

    1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...

  4. fetch + async await 使用原生JS发送网络请求

    由于现在主流浏览器支持Fetch API,无需引用其他库就能实现AJAX,一行代码就搞定,可以说是非常方便了. export default { name: 'HelloWorld', data() ...

  5. sql #与$的区别

    #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by “111”, 如果传入的值是i ...

  6. E20180605-hm

    arbitrary adj. 乱; 随意的,任性的,随心所欲的; 主观的,武断的; 霸道的,专制的,专横的,独断独行的; session n. 开会,会议; (法庭的) 开庭; 会期,学期; (进行某 ...

  7. Two sum（给定一个无重复数组和目标值，查找数组中和为目标值的两个数，并输出其下标）

    示例: nums = [1,2,5,7] target = [6] return [0,2] Python解决方案1: def twoSum(nums, target): ""&q ...

  8. C++11 并发编程基础（一）：并发、并行与C++多线程

    正文 C++11标准在标准库中为多线程提供了组件,这意味着使用C++编写与平台无关的多线程程序成为可能,而C++程序的可移植性也得到了有力的保证.另外,并发编程可提高应用的性能,这对对性能锱铢必较的C ...

  9. laravel 布局 详解（实例）

    在resources/views里创建layouts,并在layouts里创建app.blade.php, 这个php文件放的就是你的页面框架,也就是多页面公用的内容,如下 <!DOCTYPE ...

  10. thinkphp5.0 cache数据缓存机制

    use think\cache; public function index(){ //Cache::get('name')获取缓存,如果name值不存在则返回false: if (Cache::ge ...