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

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. 区间DP 等腰三角形

    题目描述:给定一个正N边形,可以通过连线将这个多边形分割成N-2个三角形,问这N-2个三角形中恰有k个等腰三角形的分割方法有多少?这个值可能很大,输出对9397取模的结果.数据范围:n,k <= ...

  2. Spring AOP schema找不到报错 原

    转自:https://my.oschina.net/zetaplusae/blog/144821 使用jersey+spring构建RESTful服务,并将应用部署在不能连接外网的服务器上.部署时,报 ...

  3. 模板 - 数学 - 快速傅里叶变换/快速数论变换（FFT/NTT）

    先看看. 通常模数常见的有998244353,1004535809,469762049,这几个的原根都是3.所求的项数还不能超过2的23次方(因为998244353的分解). 感觉没啥用. #incl ...

  4. python __builtins__ complex类 （13）

    13.'complex', 函数用于创建一个值为 real + imag * j 的复数或者转化一个字符串或数为复数.如果第一个参数为字符串,则不需要指定第二个参数. class complex(ob ...

  5. bzoj 2131: 免费的馅饼【dp+树状数组】

    简单粗暴的dp应该是把馅饼按时间排序然后设f[i]为i接到馅饼能获得的最大代价,转移是f[i]=max(f[j])+v[i],t[j]<=t[i],2t[i]-2t[j]>=abs(p[i ...

  6. CF1059D Nature Reserve（二分）

    简洁翻译: 有N个点,求与y=0相切的,包含这N个点的最小圆的半径 题解 二分半径右端点开小了结果交了二十几次都没A……mmp…… 考虑一下,显然这个半径是可以二分的 再考虑一下,如果所有点都在y轴同 ...

  7. 二分优化的lis

    /*此题为一个女大佬教我的,%%%%%%%%%%%%*/ 题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为 ...

  8. Nginx的location配置概述【转】

    语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配url路径即可.nginx不对url做编码,因此请 ...

  9. 用jquery的animate动画函数做的网页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. smtplib报警模块

    #!/usr/bin/env python # coding:utf-8 import time import subprocess import smtplib from email.mime.te ...