方法一:适用于定宽高;
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <style>

         .a{width:400px;height:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

     </style>

 </head>

 <body>

 <p class="a">有一次他被她跟烦了，板着脸问：“赵默笙，你为什么老是跟着我？”她睁大眼睛：“以琛，是你笨还是我笨，哎，你那么聪明，一定是我笨了，我怎么这么失败，追了半天人家都不知道我在干什么！”　那时候他就老是要让她等。有一次她等久了朝他发脾气。“我都数到九百九十九了，你才来！下次要是让我数到一千我就再也不理你！”结果又一次，他被系里临时抓去开会，冗长的会议终于完了后他跑去，她居然还在这次她等得脾气都没了，只是委委屈屈地看着他说：“以琛，我都数了好几个九百九十九了。”而这七年来，他又多少次数九百九十九？不是没想过放弃，只是始终没办法数到一千。</p>

 </body>

 </html>

  • overflow:hidden:超出隐藏

  • white-space:nowrap:强制不换行

  • text-overflow:ellipsis:超出省略号代替;

方法二:适用于不定宽高,但有兼容性问题,多用在移动端;


<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

    <style>

        .b {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

    </style>

</head>

<body>

<p class="b">有一次他被她跟烦了，板着脸问：“赵默笙，你为什么老是跟着我？”她睁大眼睛：“以琛，是你笨还是我笨，哎，你那么聪明，一定是我笨了，我怎么这么失败，追了半天人家都不知道我在干什么！”　那时候他就老是要让她等。有一次她等久了朝他发脾气。“我都数到九百九十九了，你才来！下次要是让我数到一千我就再也不理你！”结果又一次，他被系里临时抓去开会，冗长的会议终于完了后他跑去，她居然还在这次她等得脾气都没了，只是委委屈屈地看着他说：“以琛，我都数了好几个九百九十九了。”而这七年来，他又多少次数九百九十九？不是没想过放弃，只是始终没办法数到一千。</p>

</body>

</html>

  • display:-webkit-box:box-flex布局

  • -webkit-box-orient:vertical:垂直排列子元素

  • -webkit-line-clamp:3:显示几行

  • overflow:hidden:超出隐藏;

　　关于box-flex布局，我参考自这里

css实现超出文本省略号的两个方法的更多相关文章

  1. 关于模板该不该用css强制编辑器文本开头空两格

    关于模板该不该用css强制编辑器文本开头空两格这个问题,我很早之前就想说了,写惯了qq日志的童鞋都知道,qq空间的编辑器没有任何css控制,行头空两格是由用户自己控制,我写起日志又像流水账,长长的一篇 ...

  2. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  4. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  5. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  6. css实现超出文本溢出用省略号代替

    一.单行 实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用另外两个属性使用才能达到效果. 如下: overflow:hidden; text-overf ...

  7. css文本截字，超出文本省略号显示

    一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: h ...

  8. css处理超出文本截断问题的两种情况（多行或者单行）

    1.非多行的简单处理方式: css代码: .words{ width:400px; overflow:hidden; /*超过部分不显示*/ text-overflow:ellipsis; /*超过部 ...

  9. css内容超出显示省略号

    CSS实现单行.溢出显示省略号(…) 把要设置的显示省略号的标签,加上以下的属性 overflow: hidden; /*超出不显示*/ text-overflow: ellipsis;/* 超出内容 ...

随机推荐

  1. DevExpress控件库 开发使用经验总结1 DevExpress简介、安装、使用

    2015-01-24 最近公司开发的WinForm客户端图书行业ERP管理系统,界面端采用了DevExpress控件库.界面效果非常绚丽,类似于Office2007.2010的界面风格. 其中的控件功 ...

  2. 腾讯云服务器SMTP ERROR: Failed to connect to server

    一般邮件发送失败是 1.配置的问题. 2.扩展问题socket/ssl 百度搜出来一般都是以上的解决办法, 但是我这次遇到的不是. 本地可以放到腾讯云服务器就不行了,扩展也都开了. 后来发现是安全组端 ...

  3. UOJ#266. 【清华集训2016】Alice和Bob又在玩游戏 博弈,DSU on Tree,Trie

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ266.html 题解 首先我们可以直接暴力 $O(n^2)$ 用 sg 函数来算答案. 对于一个树就是枚举 ...

  4. python基础知识练习题（一）

    1.执行Python脚本的两种方式:WIN+R,cmd,命令行窗口输入:python  进入python模式输入命令行直接执行命令:编写以.py结尾的文件,写入命令行,然后运行python.exe打开 ...

  5. leetcode刷题五<最长回文子串>

    下面是题目的描述 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 . 示例 : 输入: "babad" 输出: "bab" 注意: ...

  6. python3安装lxmlpipinstall安装失败解决办法

    最近在学习python爬虫技术,lxml模块拥有很强大的获取元素功能,但是安装时总超时报错,如下解决办法 选择好python版本→注意pip版本→下载对应lxml.whl→键入对应的字符串→bingo ...

  7. SQL功能分类

    DDL  数据定义语言:创建表 ,库,列 DML 数据操作语言:用来操作数据库中的记录 DQL 数据查询语言 :用来查询数据 DCL 数据控制语言:定义访问权限和安全级别 —————————————— ...

  8. 开始食用grpc(之一)

    开始食用grpc(之一) 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/9501353.html ```   记一次和一锅们压马路,路过一咖啡厅(某巴克),随口 ...

  9. may be a diary?

    [About Me] SD某弱校高二的OIer. qq 995681518,欢迎一起交流~ 喵喵喵喵喵 "当你想要颓废的那一刻,想一想当初为什么走到了这里." 以下文字充满负面情绪 ...

  10. DWM1000 帧过滤代码实现

    帧过滤功能可以在同一个环境内组建多个网络而不干扰(非频段不同),可以通过PANID(网络ID)区分不同网络,不同网络中的模块无法直接通信, 再之,利用短地址,网络中可以同时有多个模块发送信息,而接收端 ...