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

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. 一步一步学Silverlight 2系列（23）：Silverlight与HTML混合之无窗口模式

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  2. hash与map的区别联系应用（转）

    一,hashtable原理: 哈希表又名散列表,其主要目的是用于解决数据的快速定位问题.考虑如下一个场景. 一列键值对数据,存储在一个table中,如何通过数据的关键字快速查找相应值呢?不要告诉我一个 ...

  3. RxJava RxBinding 按钮(Button) 点击(click)

    /********************************************************************* * RxJava RxBinding 按钮(Button) ...

  4. module+standard library.py

    #导入模块 import sys sys.path sys.path.append('D:\program files\Python34\PyWorks') #hello.py文件路径 #不用appe ...

  5. jQuery 引用地址(包括jquery和google提供的地址), 节省你不必要的流量

    转载自:http://www.cnblogs.com/henw/archive/2011/09/30/2196255.html 你可以使用这句代码读取jQuery的最新版本的代码文件. jquery官 ...

  6. CS231n 2016 通关 第二章-KNN 作业分析

    KNN作业要求: 1.掌握KNN算法原理 2.实现具体K值的KNN算法 3.实现对K值的交叉验证 1.KNN原理见上一小节 2.实现KNN 过程分两步: 1.计算测试集与训练集的距离 2.通过比较la ...

  7. ubuntu scp命令或者用root连接ssh提示：Permission denied, please try again.错误

    1.su - #!!! 2.vi /etc/ssh/sshd_config 3.PermitRootLogin yes # 找到此字段,改为此行所示 4./etc/init.d/ssh restart ...

  8. python __builtins__ property类 （55）

    55.'property',  获取对象的所有属性 class property(object) | property(fget=None, fset=None, fdel=None, doc=Non ...

  9. [问题][已解决] 并发场景下 "mysql: too many connections" 原因

    问题出现是这样的,用node写爬虫, 之前每条数据都是await插入,并且是阻塞的,后来改成了非阻塞,可以并行插入操作,结果一直找不到原因. 后来在日志中找到了 too many connection ...

  10. [JLOI2008]将军

    Description 刘先生最近在学习国际象棋,使用一个叫"jloi-08"的游戏软件.在这个游戏里,不但可以和电脑普通地对弈,还可以学习著名的棋局,还有针对初学者的规则指导等丰 ...