代码： 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. Java学习笔记之：Java的变量

    一.介绍 在Java语言中,所有的变量在使用前必须声明.声明变量的基本格式如下: type identifier [ = value][, identifier [= value] ...] ; 格式 ...

  2. ［转］useradd 与adduser的区别

    转自:Deit_Aaron的专栏 添加用户:useradd -m 用户名  然后设置密码  passwd 用户名 删除用户:userdel  -r  用户名 1. 在root权限下,useradd只是 ...

  3. latex 三线表

    LaTeX 处理三线表相当简单方便.用到的宏包主要是 booktabs .代码如下: 需要添加包:\usepackage{booktabs}. \documentclass{article} \use ...

  4. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  5. Parallel WebDriver executions using TestNG

    In this post, we will see how does one make use of TestNG to kick off parallel UI tests using WebDri ...

  6. 函数buf_page_init_for_read

    /********************************************************************//** Function which inits a pag ...

  7. UVa 1635 (唯一分解定理) Irrelevant Elements

    经过紫书的分析,已经将问题转化为求组合数C(n-1, 0)~C(n-1, n-1)中能够被m整除的个数,并输出编号(这n个数的编号从1开始) 首先将m分解质因数,然后记录下每个质因子对应的指数. 由组 ...

  8. 实现窗口逐渐增大(moveTo(),resizeTo(),resizeBy()方法)

    moveTo()方法格式:window.moveTo(x,y); 功能:将窗口移动到指定坐标(x,y)处; resizeTo()方法格式:window.resizeTo(x,y); 功能:将当前窗口改 ...

  9. ti processor sdk linux am335x evm /bin/setup-package-install.sh hacking

    #!/bin/sh # # ti processor sdk linux am335x evm /bin/setup-package-install.sh hacking # 说明: # 本文主要对T ...

  10. Android Dialog使用举例

    在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,在我们使用Android的过程中,我归纳了一 ...