如何使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. 微信小程序——1、文件的认识

    主体文件的构成 微信小程序的主体由三个部分组成,需放在主目录中,名称也是固定的 app.js:微信小程序的主逻辑文件,主要用来注册小程序 app.json:微信小程序的主配置文件,对微信小程序进行全局 ...

  2. 误把Linux运行级别设置为6后的解决方法【转】

    本文转载自:http://www.wuji8.com/meta/841011126.html 误把Linux运行级别设置为6后的解决方法     我们知道,Linux有7个运行级别,而运行级别设置为6 ...

  3. Git 基础 —— 常见使用场景

    Git 基础学习系列 Git 基础 -- 安装 配置 别名 对象 Git 基础 -- 常用命令 Git 基础 -- 常见使用场景 Git基础 -- Github 的使用 突然插入 Bugifx 工作, ...

  4. P3901 数列找不同

    P3901 数列找不同 题目描述 现有数列 \(A_1,A_2,\cdots,A_N\) ,Q 个询问 \((L_i,R_i)\) , \(A_{Li} ,A_{Li+1},\cdots,A_{Ri} ...

  5. spring集成mybatis后，打印SQL语句

    网上说mybatis的早前版本配置打印sql还比较简单,在3.0.6之后配置方式修改了. 现在的spring-mybatis.xml配置如下: <bean id="sqlSession ...

  6. git的软件安装

    1.Git for Winodws 1.*的版本   https://github.com/msysgit/msysgit/releases 2.*的版本   https://github.com/g ...

  7. perl 入门知识（1）

    <一> 语句及注释: Perl 语句以分号(;)结尾,用 # 作为一行的注释,没有其它语言中那种跨行的注释.代码块用大括号围起来,这个和 C 类似,但这个大括号在有些地方是强制要求,如在 ...

  8. [shiro] - 加入rememberMe功能

    shiro不加入rememberMe没事,一加入就出错. RememberMeAuthenticationToken : public interface RememberMeAuthenticati ...

  9. UVa 10801 电梯换乘

    https://vjudge.net/problem/UVA-10801 题意:有多个电梯,每个电梯只能到达指定楼层,每个电梯有速度,如果中途换乘电梯,需要额外加60s,求从0层到达k层的最少时间. ...

  10. IEnumerable与IEnumerator

    IEnumerable接口 IEnumerable接口:实现该接口的类,表明该类下有可以枚举的元素 public interface IEnumerable { //返回一个实现了IEnumerato ...