方法一:适用于定宽高;
 <!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. nand flash和nor flash的区别

    NOR和NAND是现在市场上两种主要的非易失闪存技术. Intel于1988年首先开发出NOR flash技术,彻底改变了原先由EPROM和EEPROM一统天下的局面. 东芝于1989年开发出NAND ...

  2. Java重头学

    前言:这两周来上了腾讯课堂-软媒-JAVA架构师黄埔班的课程后,发现自己真心是一个菜鸟,Java基础知识和日常开发所需的知识还有很多很多.就此,我准备跟着这个课程重头学习Java,成为一名合格的Jav ...

  3. Spring 下使用Junit4 单元测试

    package platform; import java.util.List; import java.util.UUID; import javax.annotation.Resource; im ...

  4. flask 中使用 socket 遇到的坑

    很久没用博客园了,最近涉及到一个问题,需要向前端推送日志 考虑的方案两个,一个是定时ajax 但是这样效率太慢了,二是用socket 那看看有没有轮子咯,面向百度编程,有两个库可以使用 1.flask ...

  5. meta标签整合

    <title>名称</title>(便于搜索) <meta name="keywords" content="内容"> ke ...

  6. 练习2-1 Programming in C is fun!

    练习2-1 Programming in C is fun! 一 问题描述 本题要求编写程序,输出一个短句“Programming in C is fun!”. 输入格式: 本题目没有输入. 输出格式 ...

  7. Python3 文件

    f=open('C:\\Users\\fengx\\Desktop\\sharing\\test.txt') 如果打开文件的格式不匹配,可能会报如下错: >>> open('C:\U ...

  8. 神奇高效的Linux命令行

    一.为什么要学linux命令 Linux是由命令行组成的操作系统,精髓在命令行,无论图形界面发展到什么水平,命令行方式的操作永远是不会变的.Linux命令有许多强大的功能:从简单的磁盘操作.文件存取, ...

  9. vscode1.30.1使用的electron3.0.10中的bug

    PS C:\GitHub\vscode2\vscode> scripts\code.bat[13:07:19] Syncronizing built-in extensions...[13:07 ...

  10. Go smtp发送邮件，带附件

    package main import ( "net/smtp" "bytes" "time" "io/ioutil" ...