如何使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. 20145216史婧瑶 《网络对抗》 MSF基础应用

    20145216史婧瑶 <网络对抗> MSF基础应用 实验回答问题 用自己的话解释什么是exploit,payload,encode. exploit:渗透攻击模块,测试者利用它来攻击一个 ...

  2. 写Java代码的一些小技巧

    写Java代码有三年多了,遇到过很多坑,也有一些小小的心得.特地分享出来供各位学习交流.这些技巧主要涉及谷歌Guava工具类的使用.Java 8新特性的使用.DSL风格开发.代码封装等技巧. 一.nu ...

  3. 维特比算法Python实现

    前言 维特比算法是隐马尔科夫问题的一个基本问题算法.维特比算法解决的问题是已知观察序列,求最可能的标注序列. 什么是维特比算法? 维特比算法尽管是基于严格的数学模型的算法,但是维特比算法毕竟是算法,因 ...

  4. Oracleシノニムについて

    SYNONYM(シノニム/別名) シノニムとは表やビューなどのオブジェクトにつけた別名のことです. この別名を付けることにより本来の名称とは異なるシノニム名でオブジェクトにアクセスすることができます. ...

  5. DD-WRT自定义脚本更新花生壳DDNS

    N年以前买了一个tp-link 841n v7,一直用的还算可以吧,除了不定期重启路由器,不然网速慢的龟爬啊!这也是TP原厂固件的通病,于是刷了DD-WRT,话说DD确实很爽,除了功能强大之外,而且很 ...

  6. linux性能分析工具之火焰图

    一.环境 1.1 jello@jello:~$ uname -a Linux jello 4.4.0-98-generic #121-Ubuntu SMP Tue Oct 10 14:24:03 UT ...

  7. P3466 [POI2008]KLO-Building blocks

    目录 题目 思路 错误 代码 题目 luogu csdn好像限制了展开博客次数,真的好xx 思路 显然一段区间内的值一定是他的中位数 少一点比多一点好 然后就可以枚举区间了 区间答案为 val[mid ...

  8. sql 锁

    数据库中不使用锁时可能出现的问题: 1.更新丢失(Lost update) 两个事务都同时更新一行数据,但是第二个事务却中途失败退出,导致对数据的两个修改都失效了.这是因为系统没有执行任何的锁操作,因 ...

  9. Jmeter 爬Boss中注册和登录

    图文验证码生成部分: Get请求到 https://m.zhipin.com/captcha/?randomKey=9dHY2lyVpxg0wFQRmzJqE5bpL4iRkhhR 每次访问新生成一个 ...

  10. HTML中常见的其它标签

    HTML中常见的其它标签 一.头标签部分 1.<title>:指定浏览器的标题栏显示的内容. 2.<base>: href 属性:指定网页中所有的超链接的目录.可以是本地目录, ...