如何使text-overflow:elipsis起作用？

想要使用css属性text-overflow:elipsis起到作用，样式必须跟overflow:hidden; white-space:nowrap;width:150px;一起使用

1、text-overflow语法：

text-overflow : clip | ellipsis

2、text-overflow参数说明：

clip: 不显示省略标记（...），而是简单的裁切

elipsis: 当对象内文本溢出时显示省略标记（...）

3、简单使用：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>测试页面</title>

    </head>

    <style type="text/css">

        .test{

            text-overflow:ellipsis;

            overflow:hidden;

            white-space:nowrap;

            width:150px;

            }

    </style>

    <body>

        <ul id="textFlow">

            <li class="test"><a href="#">第一标题：奇艺之旅</a></li>

            <li class="test"><a href="#" title="第二标题：萨迪斯的项圈的奇闻异事">第二标题：萨迪斯的项圈的奇闻异事</a></li>

            <li class="test"><a href="#" title="第三标题：杜斯的奇妙之旅。测试数据。测试数据">第三标题：杜斯的奇妙之旅。测试数据。测试数据 </a></li>

        </ul>

    </body>

</html>

4、演示效果：

aaarticlea/png;base64,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" alt="" width="235" height="92" />

如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)的更多相关文章

  1. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  2. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  3. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  4. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  5. CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  6. CSS、j's单行、多行文本溢出显示省略号

    在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...

  7. 文本溢出显示省略号，CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  8. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  9. 长文本溢出显示省略号(…) text-overflow: ellipsis

    text-overflow 属性规定当文本溢出包含元素时发生的事情. 默认值: clip 继承性: no 版本: CSS3 JavaScript 语法: object .style.textOverf ...

随机推荐

  1. cmd命令分类

    1.系统功能类 AT:计划在计算机上运行的命令和程序.ATTRIB:显示或更改文件属性.BREAK:设置或清除扩展式 CTRL+C 检查.CACLS:显示或修改文件的访问控制列表(ACLs).CALL ...

  2. JavaScript常用操作，常用类

    算术运算符 重点关注 算数,赋值,逻辑运算符,三目运算符 <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. jQuery ajax 添加头部参数跨域

    1.添加HTTP文件头 $.ajax({ url: "http://www.baidu.com", //contentType: "text/html; charset= ...

  4. HDU 3466 Proud Merchants（0-1背包）

    http://acm.hdu.edu.cn/showproblem.php?pid=3466 题意: 最近,iSea去了一个古老的国家.在这么长的时间里,它是世界上最富有和最强大的王国.结果,这个国家 ...

  5. UVa 1152 和为0的4个值（二分查找）

    https://vjudge.net/problem/UVA-1152 题意:给定4个n元素集合A,B,C,D,要求分别从中选取一个元素a,b,c,d,使得a+b+c+d=0.问有多少种取法. 思路: ...

  6. HDU 1043 Eight（双向BFS+康托展开）

    http://acm.hdu.edu.cn/showproblem.php?pid=1043 题意:给出一个八数码,求出到达指定状态的路径. 思路:路径寻找问题.在这道题里用到的知识点挺多的.第一次用 ...

  7. Python time模块详解--转载

    1.在Python中,通常有这几种方式来表示时间:1)时间戳 2)格式化的时间字符串 3)元组(struct_time)共九个元素.由于Python的time模块实现主要调用C库,所以各个平台可能有所 ...

  8. Intel微处理器学习笔记（四） 内存分页

    内存分页机制(memory paging mechanism)是从386开始的.线性地址通过分页机制透明转换为物理地址. 从这里知道:1. 如果不分页,则线性地址等于物理地址:2. 如果分页,则线性地 ...

  9. Ubuntu 14.04设置开机启动脚本的方法

    rc.local脚本 rc.local脚本是一个ubuntu开机后会自动执行的脚本,我们可以在该脚本内添加命令行指令.该脚本位于/etc/路径下,需要root权限才能修改. 该脚本具体格式如下: #! ...

  10. Springboot mybatis generate 自动生成实体类和Mapper

    https://github.com/JasmineQian/SpringDemo_2019/tree/master/mybatis Springboot让java开发变得方便,Springboot中 ...