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

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. 【Codeforces 776B】Sherlock and his girlfriend

    [题目链接] 点击打开链接 [算法] 将所有质数染成1,合数染成2即可 [代码] #include<bits/stdc++.h> using namespace std; #define ...

  2. javascript break 和continue

    break语句还可以跳出循环,也就是结束循环语句的执行. continue语句的作用为结束本次循环,接着进行下一次是否执行循环的判断. continue与break的区别是:break是彻底结束循环, ...

  3. css 样式引入的方法 link 与import的区别

    <link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...

  4. 高效使用ppt素材

    一.素材大致分为: 立体素材:以TG素材为代表的那种高光立体素材 平面素材:以咨询公司麦肯锡.罗兰贝格公司为代表的平面设计的素材 二.使用原则: 原则一:平面左边,立体右边 这个原则告诉你几件事: 如 ...

  5. docker容器管理基础

    1.命令: docker info #查看服务器上docker详细信息 docker search #搜索镜像 docker image pull nginx:1.14-alpine #下载一个镜像 ...

  6. Ubuntu16.04 开机显示The system is running in low-graphics mode

    1. 在"The system is running in low-graphics mode"界面,直接按 ctrl+alt+F1,会进入一个命令输入的模式 2. 输入用户名密码 ...

  7. 025--python初识类和对象

    一.面向对象的定义 说到面向对象,我们先来看一下面向过程的定义:面向过程的程序设计的核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么 ...

  8. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 23. 继续讲Tag Helpers 和复习View Component

    当条件为true就渲染,否则就不渲染 ‘ 判断用户的登陆 更好的一点是做一个TagHelper.把这些明显的C#代码都去掉.最终都是用html和属性的形式来组成一个最终的代码 属性名称等于Confit ...

  9. DPWL具关劳过农派广决建

    圆来压平便几从细样听二现当群世权半几影志土济长即江装家革候它准原打边社而从越何从式万难因造化阶求电么才论须指直很已毛有济做把活半或须白安共角争斗也重代只因识九少�

  10. 常用js方法集合

    var func={ //对象转jsonstring getJsonStr: function(jsonObj) { var temp = []; for (var key in jsonObj) { ...