代码： 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. Intellij idea使用postgresql 反向生成实例， 'Basic' attribute type should not be 'Object'

    mapped type不能Object? 本人使用 intellij idea 15 , postgresql 9.4,在开发java ee . 在用 Hibernate时, 需要用数据库表反向生成实 ...

  2. 7、单向一对多的关联关系（1的一方有n的一方的集合属性，n的一方却没有1的一方的引用）

    单向一对多的关联关系 具体体现:1的一方有n的一方的集合的引用,n的一方却没有1的一方的引用 举个例子:顾客Customer对订单Order是一个单向一对多的关联关系.Customer一方有对Orde ...

  3. openCv 图像顺时针、逆时针旋转

    通过下面这个函数调用 Rotate90(workImg,270); //顺时针旋转 Rotate90(workImg,90); //逆时针旋转 实现,其实用该函数旋转任意度数对正方形图都ok,只是长方 ...

  4. eclipse jetty插件安装（离线版）

    按照网上的说法安装jetty插件,run-jetty-run,google那个网址根本链接不上.所以插件装不上,网上搜索本地版,试了几个都不好使,功能不全,这是因为下载的本地资源jar包不全导致,好坑 ...

  5. 解决PHP开启gd库无效的问题

    最近需要重新安装PHP,以前一直使用的都是XAMPP,基本上都不需要自己配置,现在准备直接下载官方原版的Apache和PHP,自己来慢慢摸索如何继承配置. 我下载的Apache版本为2.2.25,PH ...

  6. apk反编译(5)用apktool重新生成一个未签名的apk

    用apktool反编译apk后,得到一个目录,里面有smali文件,可以对其修改,然后用apktool重新生成一个未签名的apk. 如,把smali文件中的广告部分去掉或改成自己的. 命令如下:与破解 ...

  7. C#获取本机IP以及无线网ip

       1 private void GetIP()   2 { 3 string hostName = Dns.GetHostName();//本机名 4 //System.Net.IPAddress ...

  8. Servlet错误一览

    错误:HTTP Status 405 - HTTP method POST is not supported by this URL 原因:没有提供doPost方法 错误:控制器跳转到空白界面 原因: ...

  9. bzoj3242

    如果是树,那么一定选择树的直径的中点 套了个环?裸的想法显然是断开环,然后求所有树的直径的最小值 环套树dp的一般思路,先把环放到根,把环上点下面的子树dp出来,然后再处理环上的情况 设f[i]表示以 ...

  10. 关于<img>标签与文字垂直居中

    要让左边的图片与后面的文字居中,如下效果 HTML代码: <img class="iconCls" alt="最新客户端" src="${bas ...