代码： 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. 用React.addons.TestUtils、Jasmine进行单元测试

    一.用到的工具 1.React.addons.TestUtils 2.Jasmine 3.Browserify(处理jsx文件的require依赖关系) 4.Reactify(能和browserify ...

  2. 2014-9-17二班----10 web project

    package cn.rwkj.servlet; import java.io.IOException; import javax.servlet.ServletException; import j ...

  3. windows和linux共享文件

    一篇文章: 环境:主机操作系统 是Windows XP ,虚拟机 是Ubuntu 9.10,虚拟机是VirtualBox 3.08. 1. 安装增强功能包(Guest Additions) 安装好Ub ...

  4. 【原创】30分钟入门 github

    很久没更新了,这篇文章重点在github的入门使用,读者可以下载github for windows shell,边看边操作,加深印象. 好了,30分钟的愉快之旅开始吧: 一.github使用的注意事 ...

  5. 关于Linux的windows目录的挂载

    今天,linux主机下面要增加一点空间,不想再增加硬盘,所以就在实体机里面就设置了目录共享,添加自己系统的默认账号(为了增加自己主机的安全性,我都是设置的含有标点符号的密码---这也是这次挂载不成功的 ...

  6. 车牌识别LPR（七）-- 字符特征

    第七篇:字符特征 选择的字符特征应该满足以下条件: (1)选取的字符特征具有较强的鲁棒性,不受字符变形.弯曲等影响. (2)两个字符的字符特征不能完全相同,但部分相同是允许的,即选择的字符特征是唯一的 ...

  7. windows2003 iis6.0站点打不开，找不到服务器或 DNS 错误。

    最近服务器经常出现打不开网站的现象,有时出现在上午,有时出现在中午,几乎天天都会出现一次,出现问题时,无论是回收程序池还是重启IIS或者关闭其它一些可能有影响的服务,都不能解决问题.网站打不开时,有如 ...

  8. ganglia的yum插件的配置

    由于默认的centos的库是不存在ganglia的相关软件,因此要重新配置yum的库 配置yum库 安装yum优先级插件 yum install yum-priorities 安装Epel  此处是6 ...

  9. C#中跨线程读取控件值、设置控件值

    编写应用程序时,涉及到大量数据处理.串口通信.Socket通信等都会用到多线程,多线程中如何跨线程调用主界面或其他界面下的控件是一个问题,利用invoke和delegate可以解决. delegate ...

  10. javascript中的关键字和保留字

    javascript中关键字的问题,将名称替换了下,确实就没有问题了.现在将它的关键字和保留字贴出来,便于日后查看和避免在次出现类似的问题. 1 关键字breakcasecatchcontinuede ...