需要对div或者span同时应用Css：

text-overflow:ellipsis;

white-space:nowrap;

overflow:hidden;

即可实现所想要得到的溢出文本显示省略号效果。

当然了你的页面元素要设置固定的宽度，超出了宽度才会显示。

HTML超出文本显示省略号...[text-overflow]的更多相关文章

  1. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  2. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  3. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  4. CSS3：text-overflow实现文字截取，超出部分显示省略号

    1. 概述 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处, 一是不用通过后端程序截取: 二是有利于SEO. 2. text-overflow的属性 clip: 当对象 ...

  5. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  6. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  7. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  8. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  9. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

随机推荐

  1. 基数排序详解以及java实现

    前言 基数排序(radix sort)又称桶排序(bucket sort),相对于常见的比较排序,基数排序是一种分配式排序,即通过将所有数字分配到应在的位置最后再覆盖到原数组完成排序的过程.我在上一篇 ...

  2. WPF让人哭笑不得的资源

    前几天遇到了一个让我哭笑不得的bug,我写的Wpf程序在Win7里可以运行,到XP.WindowsServer里运行点击某个控件之后闪退,不报任何错,在后台代码里trycatch也捕捉不到任何异常.很 ...

  3. Painter 12安装教程

    1 首先打开激活器 2 开始安装,点击我有序列码,把激活器中的序列码粘贴到安装文件中. 3 安装完成后,点击activate option选项,点击电话联系: 激活成功

  4. EasyMock使用手记

    from:http://www.blogjava.net/supercrsky/articles/162766.html Mock 对象能够模拟领域对象的部分行为,并且能够检验运行结果是否和预期的一致 ...

  5. 使用php代码如何筛选出ie6及以下的浏览器。

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-09) <?php //ie6及以下的浏览器不加载js_menu文件. if (strpos($_SERVER[' ...

  6. Codeforces Educational Codeforces Round 5 A. Comparing Two Long Integers 高精度比大小，模拟

    A. Comparing Two Long Integers 题目连接: http://www.codeforces.com/contest/616/problem/A Description You ...

  7. Codeforces Round #338 (Div. 2) B. Longtail Hedgehog dp

    B. Longtail Hedgehog 题目连接: http://www.codeforces.com/contest/615/problem/B Description This Christma ...

  8. C语言阶乘和求闰年

    #include<stdio.h> void main(){ int i,a,s=1; scanf("%d",&a); for(i=1;i<=a;i++) ...

  9. Android-Chat-Widget

    Original: https://github.com/ijarobot/Android-Chat-Widget Backup: https://github.com/eltld/Android-C ...

  10. HTML5 修改浏览器url而不刷新页面

    嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...