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

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. June Challenge 2017

    A Good Set 分析:水题,选奇数即可 #include "iostream" #include "cstdio" #include "cstr ...

  2. Python的单元测试工具——doctest

    doctest是一个python标准库自带的轻量单元测试工具,适合实现一些简单的单元测试.它可以在docstring中寻找测试用例并执行,比较输出结果与期望值是否符合. 基本用法使用doctest需要 ...

  3. ul下的li浮动，如何是ul有li的高度

    此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title& ...

  4. zabbix 监控mysql状态 -Windows

    由于公司爬虫mysql数据库在Windows下面,监控一下: 主要命令:mysqladmin -uroot -proot -h127.0.0.1 ping 2>D:\zabbix\waring. ...

  5. vmware实现与windows下的共享文件

    1 首先你得先设置一下windows下得共享 比如是准备共享D盘 那么右击 ----->属性------->高级共享勾上就OK勒 2那么vmware怎么设置呢? 打开vmware-> ...

  6. php 中的引用(&)与foreach结合后的一个注意点

    关于php中引用的概念及foreach循环的的应用就不多说了,php文档已经说的很明白了.直接上一段代码: <?php $arr = array(1,2, 3); foreach($arr as ...

  7. Swift @objcMembers

    使用@objcMembers关键字,将类中的所有方法暴露给Objc (效果等同于为所有方法加上@objc). 示例代码: @objcMembers class MyController: UIView ...

  8. nginx添加模块

    [root@VM_0_3_centos nginx]# ./sbin/nginx -V nginx version: nginx/1.12.2 built by gcc 4.8.5 20150623 ...

  9. 题解报告：NYOJ #737 石子合并（一）（区间dp）

    描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的两堆石子堆成一堆,每次合并花费的代价为这两堆石子的和,经过N-1次合并后成为一堆.求出总的代价最小值 ...

  10. 启动azkaban时出现User xml file conf/azkaban-users.xml doesn't exist问题解决（图文详解）

      问题详情 [hadoop@master azkaban]$ ll total drwxrwxr-x hadoop hadoop May : azkaban- drwxrwxr-x hadoop h ...