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

一、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. rundeck

    docker run -d -p 4440:4440 -e EXTERNAL_SERVER_URL=http://109.105.4.65:4440 -v/root/rundeck:/var/rund ...

  2. 图解Java常用数据结构(一)

    最近在整理数据结构方面的知识, 系统化看了下Java中常用数据结构, 突发奇想用动画来绘制数据流转过程. 主要基于jdk8, 可能会有些特性与jdk7之前不相同, 例如LinkedList Linke ...

  3. 1-求组合数（c(n, m)）的几种方法

    1.求C(n, m) 动态规划(递归+记忆数组) 递推关系为:C(n, m) = C(n-1, m) + C(n - 1, m - 1),C(n, m)表示为从n个数中选出m个出来,可以基于最后一个元 ...

  4. linux下mysql开启远程访问权限及防火墙开放3306端口（mysql开放host访问权限）

    开启mysql的远程访问权限默认mysql的用户是没有远程访问的权限的,因此当程序跟数据库不在同一台服务器上时,我们需要开启mysql的远程访问权限.主流的有两种方法,改表法和授权法.相对而言,改表法 ...

  5. 探究算子find_shape_model中参数MaxOverlap的准确意思

    基于形状的模板查找算子: find_shape_model(Image : : ModelID, AngleStart, AngleExtent, MinScore, NumMatches, MaxO ...

  6. c语言蛋疼的字符串赋值

    我觉得c语言比较蛋疼的一个地方就是给字符串赋值,不是初始化,是赋值. char string[20]={0}; 你不能通过 string="hello";这种方式赋值.但是在字符串 ...

  7. 二维数组中的查找(java)

    问题描述                                                                                                 ...

  8. 一些使用的linux库

    1.curl网络库 apt-get install libcurl4-openssl-dev sudo apt-get install curl 2.jsoncpp库 sudo apt-get ins ...

  9. [Selenium] 怎样判断是否适合自动化测试

    实施自动化测试前需要对软件开发过程进行分析,以观察其是否适合使用自动化测试.通常需要满足以下条件: 1)需求变动不频繁 2)项目周期足够长 3)自动化测试脚本可重复使用 4)手工测试无法完成或者需要大 ...

  10. Java JarFile 解析

    Java JarFile 解析 package com.github.binarylei; import java.io.*; import java.net.URL; import java.net ...