需求：
当文本长度溢出包含元素时以省略号结尾

CSS3实现方法：

#MyDIV
{
overflow:hidden;
text-overflow:ellipsis;
}

示例：
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。</p>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>这个 div 使用 "text-overflow:clip"：</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>

</html>

CCS3超长文字显示省略号的方法的更多相关文章

  1. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  2. css实现文字过长显示省略号的方法

    <div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...

  3. CSS截取截取字符长度并显示省略号的方法

    HTML部分 <div> <span>这是一个CSS3截取截取字符的例子.它根据宽度来处理.</span> </div> <div class=& ...

  4. css3超过指定宽度文字,显示省略号

    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px;

  5. (轉)CSS 单行溢出文本显示省略号...的方法（兼容IE FF）

    轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...

  6. 用css3让溢出内容显示省略号

    css3现在越来越普及了.给我们前端人员也带来了极大的便利.以前要实现让溢出的内容显示省略号还得通过js实现,现在完全可以用css代替之. 主要的代码如下: <style type=" ...

  7. js实现多行文本超出一定字数显示省略号功能

    最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...

  8. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  9. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

随机推荐

  1. 【Maven】pom.xml（1）

    在pom.xml加入: <build> <finalName>oauth2</finalName> <resources> <resource&g ...

  2. DLL远程注入实例

    一般情况下,每个进程都有自己的私有空间,理论上,别的进程是不允许对这个私人空间进行操作的,但是,我们可以利用一些方法进入这个空间并进行操作,将自己的代码写入正在运行的进程中,于是就有了远程注入了. 对 ...

  3. bzoj1097

    最短路+状压dp 肯定是状压dp 那么我们把k个点的单源最短路预处理出来,然后dp[i][j]表示状态为i,当前在j需要走的最短距离,给定的限制用状态压一下就行了 注意特判k=0的情况 #includ ...

  4. UI：多线程 、用GCD创建线程

    什么是应用(程序):就是我们编写的代码编译后生成的app文件 进程:凡是一个运行的程序都可以看作为一个进程,如打开的多个 word,就可以认为是一个进程的多个线程. 线程:至少有一个线程就是主线程,网 ...

  5. win10部署Python3和Python2

    首先添加两个的环境变量, 使用python3 -m pip -v (后面为自己的pip命令) 工具: pip install you-get you-get -url

  6. （水题）洛谷 - P1003 - 铺地毯

    https://www.luogu.org/problemnew/show/P1003 一开始觉得是用树套树来区间修改单点查询,但是发现空间不够开. 看了题解发现这个是静态的问题,而且只问一个点的结果 ...

  7. Codeforces - 466C - Number of Ways - 组合数学

    https://codeforces.com/problemset/problem/466/C 要把数据分为均等的非空的三组,那么每次确定第二个分割点的时候把(除此之外的)第一个分割点的数目加上就可以 ...

  8. HDOJ2955 0/1背包的价值和重量

    [hdoj2955] 1.概率问题: 计算逃跑率,但是要变成相×的 2.背包处理问题 然后因为率不能作为那个重量,所以价值作为重量,求一个在每个价值下的最大的逃跑率,然后在给定的逃跑率下面,来一个su ...

  9. cocos2d-html5基础

    1 环境搭建 版本Cocos2d-html5-v2.2,tomcat7.0 配置tomcat,然后直接解压Cocos2d-html5-v2.2.zip,访问解压后的根目录的index.html就可以看 ...

  10. 问题 3: 糖果数（candy）

    问题 3: 糖果数(candy) 题目描述 学校准备去春游,委托小明分发糖果,每位同学一袋,数量随机. 一共有N袋糖果,编号为1到N,小明拿了从编号a袋到编号b袋的糖果去分发,小明想知道,他一共拿了多 ...