如何使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. C# 将文件转换为 Stream

    public Stream FileToStream(string fileName) { // 打开文件 FileStream fileStream = new FileStream(fileNam ...

  2. 在ubuntu bionic下对基于qemu的arm64进行linux内核5.0.1版本的编译和运行

    一.环境介绍 OS:ubuntu bionic 64bit 二.准备工作 2.1 安装必要的开发工具 sudo apt-get install git flex bison build-essenti ...

  3. leetcode 最长有效括号

    给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()" 输出: 2 解释: 最长有效括号子串为 "()&quo ...

  4. UVa 11584 划分成回文串

    https://vjudge.net/problem/UVA-11584 题意: 给出一串字符,把它划分成尽量少的回文串. 思路: 用d[i]表示划分到i时所能划分的最小个数,转移方程为d[i]=mi ...

  5. VcCallC#_01

    1.C# 代码: using System; using System.Collections.Generic; //using System.Linq; using System.Text; //u ...

  6. 《A_Pancers》团队作业6—团队项目系统设计改进与详细设计

    一.团队项目系统设计改进: 1.分析项目系统设计说明书初稿的不足,特别是软件系统结构模型建模不完善内容: 在上一次的项目系统设计说明书中没有很好的完成软件系统结构模型的建模设计,只做了基本的系统项目原 ...

  7. Codeforces D - The Child and Zoo

    D - The Child and Zoo 思路: 并查集+贪心 每条边的权值可以用min(a[u],a[v])来表示,然后按边的权值从大到小排序 然后用并查集从大的边开始合并,因为你要合并的这两个联 ...

  8. HDU2017新生赛 友好整数

    思路: 很简单的一个状态压缩,比赛时没想出来. 最多只有2^10个状态,n^2暴力一下也就1e6. 代码: #include<bits/stdc++.h> using namespace ...

  9. angular2版本迭代之特性追踪

    一. 2.0.0 升级到 2.4 升级前: 1.确保没有使用extends关键字实现OnInit的继承,以及没有用任何的生命周期中,而是全部改用implements. 2.停止使用deep impor ...

  10. canvas和图片之间的互相装换

    canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...