方法一:适用于定宽高;
 <!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. 洛谷 p2678 跳石头 题解

    一道裸的二分答案 如果不会分治的去找dalao吧,本蒟蒻只会二分 不知道二分答案的看这里 这位dalao解释的很详细其实只是随便找了一个 那里面貌似也有这个题的题解,但我还是要写(才不是应付老师) 关 ...

  2. 第三次作业-结对编程（wordcount）

    GIT地址 https://github.com/gentlemanzq/WordCount.git GIT用户名  gentlemanzq 结对伙伴博客地址 https://home.cnblogs ...

  3. Codeforces 813C The Tag Game (BFS最短路)

    <题目链接> 题目大意:A.B两人在一颗树上,A在根节点1上,B在节点x上,现在他们轮流走,每次只能走一步,或者不走.A以尽可能靠近B的方式行走,B以尽可能远离A的方式走,B先开始走.问你 ...

  4. C#代码总结01---如何清空页面上所有文本框的内容。（用于录入后的清空）

    /// <summary> /// 清空页面上所有TextBox的内容.用于录入后的清空 /// </summary> /// <param name="top ...

  5. ISP PIPLINE (十) HDR

    在讲HDR之前先理解一些概念,要知道为什么进行HDR? 再去想如何进行HDR. 自然界的中光强度很宽,而人眼对高亮,极暗环境的细节分辨能力比较弱.而摄像头记录的范围更窄,真正的HDR技术就是记录视觉范 ...

  6. Dancing Links 学习笔记

    Dancing Links 本周的AI引论作业布置了一道数独 加了奇怪剪枝仍然TLE的Candy?不得不去学了dlx dlxnb! Exact cover 设全集X,X的若干子集的集合为S.精确覆盖是 ...

  7. Y1S001 ubuntu下samba安装配置以及使用vbs映射到驱动器

    我这边安装samba只用了两步 第一步 sudo apt-get install samba 第二步 sudo vi /etc/samba/smb.conf 主要修改点如下,去掉注释或者修改=右边的值 ...

  8. Swagger2教程

    Swagger2教程 作用:编写和维护接口文档. 一.Swagger2 + SpringBoot集成 1.依赖 <!--依赖管理 --> <dependencies> < ...

  9. 三色GDOI

    前面说点什么.. 翻了翻别人的游记.. 发现自己从来没写过gdoi的游记.. 那就.. 一起写完它吧.. GDOI2015 肇庆 没啥印象,只有复联2的首映.. 那时候真的是什么都不懂.. 就是外出打 ...

  10. redis + cookies 实现持久登入

    通过登入把用户信息和token加载到redis中去, 将token和部分用户信息存储在cookie中, 下次登入时 判断cookie的token在redis中是否存在, 存在就把用户信息加载出来自动登 ...