代码： 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 进行 RSA 加解密时不得不考虑到的那些事儿

    1. 加密的系统不要具备解密的功能,否则 RSA 可能不太合适 公钥加密,私钥解密.加密的系统和解密的系统分开部署,加密的系统不应该同时具备解密的功能,这样即使黑客攻破了加密系统,他拿到的也只是一堆无 ...

  2. idea 找不到 没有 tomcat server

    follow me 1. 2. 3. 4.

  3. 内存分配方法 kmalloc()、vmalloc()、__get_free_pages()

    Copyright: 该文章版权由潘云登所有.可在非商业目的下任意传播和复制. 对于商业目的下对本文的任何行为需经作者同意. kmalloc #include <linux/slab.h> ...

  4. SQL中查询优化的主要策略

    为了能提高查询效率按优先级主要有一下策略: 1.尽可能早的执行选择操作(最基本的一条) 2.把笛卡尔积和随后的选择操作合并成F连接运算 3.同时计算一连串的选择和投影运算 4.保留同一子式的结果 5. ...

  5. IIS 10.0 无法安装 URL rewrite重写模块 2.0解决办法

    [问题描述]系统升级到Windows10后,IIS是10.0的,发现无法安装 URLRewrite重写模块 2.0. [解决办法]打开注册表编辑器,在HKEY_LOCAL_MACHINE\SOFTWA ...

  6. 自定义View，圆形头像

    1. 效果图 2. xml中 <com.etoury.etoury.ui.view.CircleImg android:id="@+id/user_info_head_img" ...

  7. ti processor sdk linux am335x evm /bin/setup-host-check.sh hacking

    #!/bin/sh # # ti processor sdk linux am335x evm /bin/setup-host-check.sh hacking # 说明: # 本文主要对TI的sdk ...

  8. ViewPager+Fragment替代TabHost效果的简单示例

    本示例旨在展示fragment替代tabhost的效果,具体的业务逻辑还要根据这个示例进行扩展. 效果图如下: 主Activity代码: package com.llb.view; import ja ...

  9. 解决Jsoup网页抓取过程中需要cookie的问题

    最近在做城觅网的信息抓取,发现城觅网上海与北京的url是一样的.那怎样才确定信息的来源呢?折腾了半天,才发现城觅网是使用cookie的,如果你把网站的cookie禁用了,就无法在上海与北京之间切换了. ...

  10. ASP.NET服务器控件对应的HTML标签

    了解ASP.NET的控件最终解析成什么HTML代码,有助于我们对ASP.NET更深的了解,在使用JS交互时也知道如何操作. ASP.NET 服务器控件渲染到客户端之后对应的HTML标签讲解. labe ...