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

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中使用MVVM(2)

    Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...

  2. 第一次往github上传文件步骤

    第一次往github上传文件步骤: 1> 从右上角 '+' 位置下拉菜单中,创建一个repository 2>从右上角头像位置下拉菜单 setting中设置 SSH keys 3>打 ...

  3. [Java] 继承，隐藏，覆盖，重载，多态，抽象类，接口

    1.子类 class SonClass extends ABC{...} 在子类定义后,子类中就可以直接隐式包含父类的成员变量和方法,而不用再写,这就是使用继承的优点. 子类包含父类的成员,不是子类和 ...

  4. Java泛型和反射总结

    A a = (A)Class.forName(“pacage.A”).newInstance(); 这和你 A a = new A(): 是一样的效果. String className = “Exa ...

  5. this关键字使用

    原文地址:https://www.cnblogs.com/alsf/p/5515996.html 一,表示类中属性 1,没有使用this的情况 class Person{ // 定义Person类 p ...

  6. nc之二：nc命令详解

    NetCat,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本.因为它短小精悍(1.84版本也不过25k,旧版本或缩减版甚至更小).功能实用,被设计为一个简单.可靠的网络工具,可通 ...

  7. 148D

    概率dp+记忆化搜索 dp[i][j][0]表示当前公主走公主赢的概率,dp[i][j][1]表示当前龙走公主赢的概率,然后剩下的就是一些细节的讨论,记忆化搜索很方便 #include<bits ...

  8. 整体二分 HDU - 5808

    题目大意 有n个物品,排成一个序列,每个物品有一个di表示取到i要走的距离,vi表示i的价值. 给m组询问[l,r] ,c,sum,问由[l,r]的di<=c的物品能否凑出sum的价值(每个物品 ...

  9. View Programming Guide for iOS ---- iOS 视图编程指南(三)---Windows

    Windows Every iOS application needs at least one window—an instance of the UIWindow class—and some m ...

  10. linux中vim常用命令总结