代码： overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;

重点代码：text-overflow: ellipsis;

解释：简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。

text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

<html>

<head>

    <title> css 超出部分显示省略号</title>

</head>

<body>

    <div id="div1" style="width: 100px; background: #ccc; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div>

    重点样式是  text-overflow: ellipsis; <br />

    text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的

效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

    简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ 

text-overflow: ellipsis）。

</body>

</html>

css 超出部分显示省略号的更多相关文章

  1. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  2. CSS超出部分显示省略号…代码

    让DIV,LI等元素超出部分文字用省略号…显示. 示例: 兼容IE/Firefox/Chrome 代码: display:block;white-space:nowrap; overflow:hidd ...

  3. css 超出部分显示省略号 汇总

    单行: 加宽度 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行: display: -webkit-box; -we ...

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

    单行文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

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

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

  6. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

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

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

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

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

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

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

随机推荐

  1. Arraysort

    import java.util.*;public class Arraysort{ public static void main(String[]args){ int[]a={100,34,88, ...

  2. 246. Strobogrammatic Number

    题目: A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at ups ...

  3. Android listview的item设定高度

    在item的layout文件中,用android:layout_height设置item的高度.运行,高度设置无效. 解决办法: 给item设定minHeight,即可. -------------- ...

  4. 车牌识别LPR（一）-- 研究背景

    在年尾用了几天的时间将2014年的所有工作都总结了一遍,将之前的文档综合了下. 以下是LPR系统,车牌识别的一些总结资料. 第一篇:LPR研究背景 汽车的出现改变了以往出行徒步和以马代步的时代,极大地 ...

  5. 02-语言入门-02-ASCII码排序

    题目地址: http://acm.nyist.net/JudgeOnline/problem.php?pid=4    描述 输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个 ...

  6. selvert的过滤器filter处理中文乱码

    注意问题:在学习用selvert的过滤器filter处理中文乱码时,在filter配置初始化时用了utf-8处理中文乱码,而在提交的jsp页面中却用了gbk.虽然两种都可以出来中文乱码,但是却造成了处 ...

  7. C# 控件双缓冲控制 ControlStyles 枚举详解

    ControlStyles 枚举 .NET Framework 4    指定控件的样式和行为. 此枚举有一个 FlagsAttribute 特性,通过该特性可使其成员值按位组合. 命名空间:  Sy ...

  8. HDU 4483 Lattice triangle（欧拉函数）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4483 题意:给出一个(n+1)*(n+1)的格子.在这个格子中存在多少个三角形? 思路:反着想,所有情 ...

  9. Android开发之事件分发和Listener

    参考:http://blog.csdn.net/zhongkejingwang/article/details/38141719 http://blog.csdn.net/zhongkejingwan ...

  10. FileZilla无法确定拖放操作的目标,由于shell未正确安装

    天有不测风云,突然间,用filezilla下载ftp上的文件到桌面的时候,提示"无法确定拖放操作目标.由于shell未正确安装" 解决办法很简单,执行如下几步就OK了 1.在CMD ...