如何使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. 20145330 《网络对抗》 Web基础

    20145330 <网络对抗> Web基础 1.实践内容 (1)Web前端HTML (2)Web前端javascipt (3)Web后端:MySQL基础:正常安装.启动MySQL,建库.创 ...

  2. Linux slab分配器【转】

    本文转载自:https://www.ibm.com/developerworks/cn/linux/l-linux-slab-allocator/ 良好的操作系统性能部分依赖于操作系统有效管理资源的能 ...

  3. Linux内核分析--内核中的数据结构双向链表续【转】

    在解释完内核中的链表基本知识以后,下面解释链表的重要接口操作: 1. 声明和初始化 实际上Linux只定义了链表节点,并没有专门定义链表头,那么一个链表结构是如何建立起来的呢?让我们来看看LIST_H ...

  4. Pairs Forming LCM （LCM+ 唯一分解定理）题解

    Pairs Forming LCM Find the result of the following code: ; i <= n; i++ )        for( int j = i; j ...

  5. 第九章 对称加密算法--IDEA

    注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第7章“初等加密算法--对称加密算法” 9.1.IDEA 特点: 先于AES出来取代DES 安全性极高 常用于电子邮件加密算法 ...

  6. mysql链接 显示 error: 'Access denied for user 'root'@'localhost' (using password: NO)'

    解决方案 https://stackoverflow.com/questions/2995054/access-denied-for-user-rootlocalhost-using-password ...

  7. C++课程上 有关“指针” 的小结

    上完了C++的第二节课以后,觉得应该对这个内容进行一个小结,巩固知识点,并对我的心情进行了一个侧面烘托... 开始上课的老师: 正在上课的我: 上去敲代码的我: 过程是这样的: 下来的我: 非常的尴尬 ...

  8. 使用caffenet微调时的一些总结

    1,比较笨的方法生成图片列表(两类举例)data/myself/train 目录下 find -name cat.\*.jpg |cut -d '/' -f2-3 >train.txtsed - ...

  9. EasyUI ---- draggable可拖动的用法

    <link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" / ...

  10. ubuntu16.04, git 的配置

    1.下载git:sudo apt-get install git 2.生成公钥:ssh-keygen -t rsa -C  '你的邮箱'     ,不停回车即可 3. mkdir test cd te ...