方法一:适用于定宽高;
 <!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. Java - 数组排序 -- 浅析稳定性与复杂度

    上次我们了解了对数组的基本操作,那么谈到数组,我们就不得不谈谈数组的排序 什么是排序 排序是计算机内经常进行的一种操作,其目的是将一组“无序”的记录序列调整为“有序”的记录序列 -- 百度百科 排序是 ...

  2. Spark内核

    一些名词概念 AM : ApplicationMaster RM : ResourceManager NM : NodeManager Backend : 后台 RpcEnv : RPC 进程和进程的 ...

  3. 运用SqlSugar框架+Axios写的增删查案例

    使用SqlSugar框架需要引用NuGet程序包否则会出现报错. 前台页面创建代码: @{    ViewBag.Title = "Index";}<h2>Index& ...

  4. Git ignore文件的用法

    这周为了往自己个人代码仓库里囤货,把在公司写的一些东西上传到了自己的GitHub代码仓库,手抖把测试用的日志也一并上传了.上传没多长时间就被运维找上门了,说commit里包含内网相关信息,要求删除.当 ...

  5. Typescript骚操作,在TS里面直接插入HTML

    Typescript骚操作,在TS里面直接插入HTML,还有语法提示 先给大家看一个图 因为我不喜欢用很重的框架,主要是并非专业UI,但是偶尔会用到,还是觉得直接element组装受不了,想想能在ts ...

  6. 数据分析 大数据之路 五 pandas 报表

    pandas:  在内存中或对象,会有一套基于对象属性的方法,   可以视为 pandas 是一个存储一维表,二维表,三维表的工具, 主要以二维表为主 一维的表, (系列(Series)) 二维的表, ...

  7. css3_transition: 体验好的过渡效果。附 好看的按钮

    利用css的transition属性详解,上图就是利用transition效果做的一个按钮. transition属性://举例子:transition:all 1s ease;transition: ...

  8. LINUX监控-spotlight

    这里连接的user不能是root(spotlight需要一个具有root权限的用户,但是又不允许是root),所以需要给要连接的linux端创建一个有root权限的用户,在linux主机创建了root ...

  9. meta标签的用处详解

    meta标签的用处: 用来描述html文档的一个属性.列如作者.日期和时间,网页描述,关键字,页面刷新等. 是文档最基本的元数据 元数据(metadata): 用来概括描述数据的一些基本数据 meta ...

  10. 面试题：int和Integer的区别

    java底层源码:  -128  127之间