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

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. lucene倒排索引瘦身的一些实验——merge的本质是减少cfx文件 变为pos和doc；存储term vector多了tvx和tvd文件有337M

    store NO 压缩后的原始数据 原始数据大小 索引大小 索引时间 单词搜索时间 266 791 594 176 0.2 文件组成见后 运行forceMerge(3)后 merge的本质是减少cfx ...

  2. cassandra在服务端像leveldb一样进行插入初试成功

    经过研究,决定在 cql3/QueryProcessor.java 里面下手. 这里有两个函数,第一个是 public ResultMessage process(String queryString ...

  3. DBA之RMAN备份

    13:00 backup database   backup db :3h 3h: 产生了10 archive log file   16:00 finish restore database; 13 ...

  4. codeforces 414B B. Mashmokh and ACM(dp)

    题目链接: B. Mashmokh and ACM time limit per test 1 second memory limit per test 256 megabytes input sta ...

  5. bzoj5073

    dp 字符串dp不太会啊... 这种序列和子串的匹配一般设两个状态,dp[i][j]表示当前s匹配到i,t匹配到j的...,g[i][j]表示当前s匹配到i,t匹配到j,i,j必须匹配的...,noi ...

  6. 用Xtrabackup实现MySQL全库备份与恢复

    xtrabackup包含两个主要的工具,即xtrabackup和innobackupex,二者区别如下: (1)xtrabackup只能备份innodb和xtradb两种引擎的表,而不能备份myisa ...

  7. node-- express()模块

    1.代码分析 var express = require('express'); var app = express(); app.get('/', function(req, res){ res.s ...

  8. SpringIOC 二—— 容器 和 Bean的深入理解

    上文:Spring IOC 一--容器装配Bean的简单使用 上篇文章介绍了 Spring IOC 中最重要的两个概念--容器和Bean,以及如何使用 Spring 容器装配Bean.本文接着记录 S ...

  9. Androidstudio中添加jar包的方法

    在Androidstudio中添加一个jar包进去,怎么添加? 以下纯个人使用Androidstudio过程中的经验积累,要是有不足,望提出建议. 方法一: 先点击Androidstudio中的Pro ...

  10. dwr学习 之 一、dwr+spring的简单集成

    1. 环境搭建 我采用的环境为SpringMVC + myBatis + mySql + maven: 关于使用Eclipse构建Maven的SpringMVC项目,请参考: http://limin ...