使得div内文字的溢出部分用省略号显示，可归纳为两种解决办法，一种方法是用CSS解决，另一种方法是js解决。

一、通过CSS控制显示

div内显示一行，超出部分用省略号显示

div内显示多行，超出部分用省略号显示

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>例子</title>

        <style>

            /* 单行文字末尾省略号显示 */

            .div1{

                height: 100px;

                width:100px;

                background:green;

                text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/

                white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */

                overflow: hidden; /*超出部分隐藏*/

            }

            /* 多行文字末尾省略号显示 */

            .div2{

                /* height: 100px; */

                width:100px;

                background:yellowgreen;

                display: -webkit-box;  /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */

                -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */

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

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div class="div1">

            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

        </div>

        <div class="div2" >

            嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿

        </div>

    </body>

</html>

运行结果：

二、通过js控制显示

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>实例</title>

        <style type="text/css">

            .mydiv {

                width: 150px;

                height: 200px;

                background: pink;

            }

        </style>

    </head>

    <body>

        <div class="mydiv" id="demo">通过js操作的方法显示文字，使得末尾的文字省略号显示</div>

        <script>

            var myBox = document.getElementById('demo'); //直接用id获取domo对象

            var mydemoHtml = myBox.innerHTML.slice(0, 20) + '......'; // slice() 方法可从已有的数组中返回选定的元素

            myBox.innerHTML = mydemoHtml; // 填充到指定位置

        </script>

    </body>

</html>

运行结果：

CSS——div内文字的溢出部分用省略号显示的更多相关文章

  1. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  2. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  3. 关于DIV内文字垂直居中的写法

    最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...

  4. CSS+DIV实现文字一行内显示，并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  5. 基于CSS+dIV的网页层，点击后隐藏或显示

    一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...

  6. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  7. css+div解决文字溢出控制显示字数

    一.一般的文字截断(适用于内联与块):  Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...

  8. css一div内文字居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. div内文字显示两行，多出的文字用省略号显示

    用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...

随机推荐

  1. NX二次开发-UFUN计时函数UF_end_timer

    1 NX9+VS2012 2 3 #include <uf.h> 4 #include <uf_modl.h> 5 6 7 UF_initialize(); 8 9 //计时开 ...

  2. 笨办法学Python记录--习题12-14 主要是pydoc用法，raw_input,argv

    20140413 -- 习题12 - 14 1. pydoc在windows的用法,必须进入到python安装目录,执行Python -m pydoc raw_input; 网上给出了一个好玩的,不过 ...

  3. Java-Class-I：java.util.Map

    ylbtech-Java-Class-I:java.util.Map 1.返回顶部 1.1. import java.util.HashMap; import java.util.Map; 1.2. ...

  4. Centos6.5安装rar5.3

    linux下使用最多的压缩工具是gzip,zip等,如果需要使用rar,就必须编译安装了,以下是编译安装rar教程: 一.安装支持库yum install -y gcc gcc-c++ autocon ...

  5. 转——调试寄存器 原理与使用：DR0-DR7

    下面介绍的知识性信息来自intel IA-32手册(可以在intel的开发手册或者官方网站查到),提示和补充来自学习调试器实现时的总结. 希望能给你带去有用的信息. (DRx对应任意的一个调试寄存器. ...

  6. 从虚拟地址，到物理地址（开PAE）

    学了好久好久,但是好久好久都没有用过,今天突然要用,都快忘了怎么玩了, 这里记录一下吧. 如何检测PAE r cr4 第5位如果是1,则开了PAE,否则没开 切入目标进程 查找一个自己关注的字符串s ...

  7. SQL Server实现跨库查询（跨库select insert）

    方法一: select  * from servername.dbo.tablename 方法二: select * from OPENDATASOURCE(         'SQLOLEDB',  ...

  8. java8--Stream的flatmap与map异同的理解

    大纲: 异同点 示例 一.异同点 他们的相同点是接收的入参都是一个function. 不同点这个入参function的返回不同.map返回一个对象,flatmap返回一个stream. 这就使得map ...

  9. [JZOJ6272] 2019.8.4【NOIP提高组A】整除

    题目 题目大意 求方程\((x^m-x)\mod n=0\)在整数范围\([1,n]\)的解的个数. \(n=\sum_{i=1}^{c}p_i\) 给出\(c\)和\(p_i\) 思考历程 作为数论 ...

  10. java 数组常见操作

    1.遍历  依次访问数组中的每个元素 public class ArrayDemo04 { public static void main(String[] args) { int[] arr = { ...