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

一、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. 搭建github博客，hexo主题

    买个域名,多少钱的都有,看自己喜欢,可以去万网,ali嘛. 一般在windows,下载gitbash(配置公钥,全局用户名和email),node.js(不用配置). 新建github项目,添加公钥( ...

  2. 二叉树叶子顺序遍历 · binary tree leaves order traversal

    ［抄题］: 给定一个二叉树,像这样收集树节点:收集并移除所有叶子,重复,直到树为空. 给出一个二叉树: 1 / \ 2 3 / \ 4 5 返回 [[4, 5, 3], [2], [1]]. [暴力解 ...

  3. Rabbitmq的几种交换机模式

    Rabbitmq的核心概念(如下图所示):有虚拟主机.交换机.队列.绑定: 交换机可以理解成具有路由表的路由程序,仅此而已.每个消息都有一个称为路由键(routing key)的属性,就是一个简单的字 ...

  4. archiver error. Connect internal only, until freed. 之解决办法

    这个报错说的是数据库的日志备份不足空间.解决办法: DELETE backup COMPLETED BEFORE 'SYSDATE-7';DELETE ARCHIVELOG ALL COMPLETED ...

  5. Halcon中xld的常见特征的含义总结

    如下图:

  6. tomcat运行为什么要依靠jdk

    问题1:为什么要装jdk 因为tomcat是用java写的,所以运行需要JRE,就是JAVA运行时刻环境,所以必须通过安装JDK来得到这个运行环境,不装JDK装JRE也行,sun的网站上有下载.但是J ...

  7. HDU 1071 The area (数学定积分)

    题意:求阴影部分面积. 析:没什么可说的,就是一个普通的定积分. 代码如下: #include <cstdio> #include <iostream> using names ...

  8. 续安装好composer和workerman之后；TP5运行workerman的操作

    TP5想要实现时时通讯:首先先安装好composer和workerman,我之前有写一篇安装的方法,在cmd里面安装:tp5手册上面有写cmd命令的代码:接下来是安装好后如何运行的: 首先在项目中建立 ...

  9. Codeforces 766C Mahmoud and a Message 2017-02-21 13:57 62人阅读 评论(0) 收藏

    C. Mahmoud and a Message time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  10. tomcat7-maven-plugin 端口

    不知道有没有人像我这样,在pom配置了下面这段之后, <plugins> <plugin> <groupId>org.apache.tomcat.maven< ...