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

一、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. 二叉树翻转 · binary tree flipping

    ［抄题］: 给定一个二叉树,其中所有右节点要么是具有兄弟节点的叶节点(有一个共享相同父节点的左节点)或空白,将其倒置并将其转换为树,其中原来的右节点变为左叶子节点.返回新的根节点. 您在真实的面试中是 ...

  2. Golang之fmt格式“占位符”

    golang的fmt包实现了格式化I/O函数: package main import "fmt" type Human struct { Name string } func m ...

  3. ultraiso制作ubuntu u盘启动

    http://blog.csdn.net/yaoyut/article/details/78003061

  4. PHP语言性能优化——少使用魔术方法

    对以下使用魔术方法和不适用魔术方法运行时间进行比较 使用魔术方法test1.php: <?php /** * 测试类 */ class test { private $name = " ...

  5. 利用FFmpeg转压视频的说明

    当我们制作视频的时候,录制完成的视频往往很大,很容易超过50M,上传的时候会很慢.下面将相关技巧说明如下(转载,版权属于原作者所有). 利用FFmpeg转压视频的说明 录制介绍视频时可以用尽可能高的分 ...

  6. CoderForces 689A Mike and Cellphone (水题)

    题意:给定一个手机键盘数字九宫格,然后让你判断某种操作是不是唯一的,也就是说是不是可以通过平移也能实现. 析:我的想法是那就平移一下,看看能实现,就四种平移,上,下,左,右,上是-3,要注意0变成8, ...

  7. # 20155327 2016-2017-4 《Java程序设计》第9周学习总结

    20155327 2016-2017-4 <Java程序设计>第9周学习总结 20155327 2016-2017-4 <Java程序设计>第9周学习总结 教材学习内容总结 了 ...

  8. js Object

    对象 var ob = {}; 键值对 可以做为key的有 :数字,boolean(某些浏览器不支持,比如IE),字符串(不包含标识符) 可以作为value的有 :一切可以解析为具体值的代码 var ...

  9. java中时间

    格式转化 SimpleDateFormat package day1211.common; import java.sql.Date;import java.sql.Timestamp;import ...

  10. 解决部分版本kali升级后w3af无法运行的问题

    1,w3af简介 w3af是一个Web应用程序攻击和检查框架.该项目已超过130个插件,其中包括检查网站爬虫,SQL注入(SQL Injection),跨站(XSS),本地文件包含(LFI),远程文件 ...