文字溢出处理有两种方式：

一、css

overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

二、js方法

控制字符个数，超出部分这不显示

以下为示例demo.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>text test</title>

     <style>

         .wrapper{

             display:flex;

             flex-direction: row;

             justify-content: space-between;

             width: 1000px;

             height:300px;

             margin:100px auto;

         }

         .wrapper p{

             width: 300px;

             height:auto;

             padding:20px;

             border:1px solid #ddd;

             box-sizing: border-box;

         }

         .wrapper p:nth-child(1){

             overflow:hidden;

             white-space: nowrap;

             text-overflow: ellipsis;

         }

         .wrapper p:nth-child(2){

             overflow:hidden;

             text-overflow: ellipsis;

             display:-webkit-box;

             -webkit-box-orient: vertical;

             -webkit-line-clamp:2;  /* 限制在一个块元素显示的文本的行数。*/

         }

     </style>

 </head>

 <body>

 <div class="wrapper">

     <p>青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>

     <p>青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>

     <p id="textover">青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>

 </div>

 <script type="text/javascript" src="jquery-1.11.0.min.js"></script>

 <script type="text/javascript">

     $(document).ready(function(){

         var textLgth = 20;

         var textCur = $("#textover").text().length;

         if(textCur > textLgth){

             $("#textover").text($("#textover").text().substring(0,textLgth));

             $("#textover").html($("#textover").html()+'...')

         }

     });

 </script>

 </body>

 </html>

最后页面展示

html中文字溢出处理（text-overflow）的更多相关文章

  1. table不让td中文字溢出操作方法

    table不让td中文字溢出操作方法 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } t ...

  2. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. box布局中文字溢出问题

    如果不设置-webkit-box-flex:1:会溢出,设置width也行,在电脑上模拟可能会有问题,手机上没问题

  4. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  5. td文字溢出显示省略号

    昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflo ...

  6. table 中 文字长度大于td宽度，导致文字换行 解决方案

    1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...

  7. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  8. html 文字溢出标签

    overflow:visible;作用:能看到溢出部分. overflow: hidden;作用:溢出部分看不到 overflow:scroll; 作用:出现一个滚动条(不超过的文字也会在滚动条里) ...

  9. JS实现中英文混合文字溢出友好截取功能

    在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 ...

随机推荐

  1. IIS上架设https网站证书处理备忘

    1. 免费SSL证书申请 https://www.startssl.com 教程:http://hxs.fd.fj.cn/?action=show&id=13 2. 证书转换 申请到的证书有两 ...

  2. 【bzoj1911】[Apio2010]特别行动队

    1911: [Apio2010]特别行动队 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 4048  Solved: 1913[Submit][Statu ...

  3. 外层div高度不随内层div高度改变的解决办法

    当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开. <div id=“div1″> <div id=”div2″ style="float: ...

  4. Docker使用link建立容器之间的连接

    我们在使用Docker的时候,经常可能需要连接到其他的容器,比如:web服务需要连接数据库.按照往常的做法,需要先启动数据库的容器,映射出端口来,然后配置好客户端的容器,再去访问.其实针对这种场景,D ...

  5. windows查看内存频率

    命令行查看: wmic memorychip 任务管理器查看: 任务管理器-性能-内存-速度

  6. 判断字符串是否为回文 python

    回文正序和逆序一样的字符串,例如abccba 方法一 def is_palindrome1(text): l = list(text) l.reverse() t1 = ''.join(l) if t ...

  7. Redis数据结构（六）

    Redis数据结构(Sort-set)(游戏排名和微博热点话题排名上应用): 特点:可存储有序但不重复的数据,根据分数指定存储顺序 1 Sort-set和Set的区别: (1)sort的每个成员都是以 ...

  8. swoole1.8.0+版本异步redis安装(本实例为swoole1.8.10版本)详解

    Swoole-1.8.0+版本增加了对异步Redis客户端的支持,基于redis官方提供的hiredis库实现.Swoole提供了__call魔术方法,来映射绝大部分Redis指令(本次安装实例为sw ...

  9. 密码分析：使用 Ettercap 和 它的 ARP 毒化功能来嗅探流量

    vim /etc/etterconf 将 ec_uid 和 ec_gid 改为 0 需要取消下面的 IPTABLES 行的注释.它在靠近文件末尾的 LINUX 一节 ettercap -G Shift ...

  10. Linux 基础教程 32-解压缩命令

        将文件压缩后对提升数据传输效率,降低传输带宽,管理备份数据都有非常重要的功能,因此文件压缩解压技能就成为必备技能.相对于Windows中的文件解压缩工具百花争艳,在Linux中的解压缩工具则要 ...