CCS3属性之text-overflow:ellipsis;的用法和注意之处

语法:

text-overflow:clip | ellipsis

默认值:clip

适用于:所有元素

clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。 
ellipsis: 当对象内文本溢出时显示省略标记(...)。

更多参考:http://hovertree.com/h/bjaf/pr_text-overflow.htm

在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:200px;这三个样式共同使用才会有效果,示例代码:

<style type="text/css">
.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:360px;}
</style> <div class="test">欢迎光临<a href="http://hovertree.com/">何问起</a>! hovertree.com css3实现文本溢出显示省略号。<a href="http://hovertree.net/">Midi下载</a></div>

查看效果:http://hovertree.com/h/bjaf/1hg11eg4.htm

练习题:http://hovertree.com/tiku/bjaf/curs4a42.htm

web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html

CSS3文本溢出显示省略号的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. ZH奶酪:HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

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

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

  9. WEB-CSS实现单行(多行)文本溢出显示省略号

    //单行文本溢出部分隐藏显示省略号...overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /** n 行文本溢出部分隐藏显示 ...

随机推荐

  1. JSON-fastjson

    fastjson 是alibaba的一个Json处理工具包. 1.使用  JSON.toJSONString   和  JSON.parseObject fastjson只需要掌握两个静态方法:JSO ...

  2. ATM模拟器(附代码及运行结果)

    源代码: import java.util.Scanner; class Account{ String identify; String name; String date; String key; ...

  3. 在web上逐行输出较大的txt文件

    在某些场景下,需要在web上展示一些日志文件,这些日志文件是放在文件服务器上的一些txt. 当日志文件很大时,下载日志会导致页面长时间卡住,一直在loading状态,而且下载完日志之后分析日志并生成d ...

  4. Objective-C中的委托(代理)模式

    我个人更喜欢把委托(Delegate)模式称为代理(Proxy)模式.还是那句话,第一次接触代理模式是在Java中接触的,在Java中实现代理模式和接口是少不了的.当时学习Spring的时候用到了接口 ...

  5. ZOJ Problem Set - 1045 HangOver

    #include <stdio.h> int main() { float c; int i; while(scanf("%f",&c)!=EOF&&a ...

  6. 移动端(h5)开发笔记

    1.禁止缩放+禁止缓存 <head> <meta charset="UTF-8" /> <meta name="viewport" ...

  7. 【集合框架】JDK1.8源码分析之HashMap(一)

    一.前言 在分析jdk1.8后的HashMap源码时,发现网上好多分析都是基于之前的jdk,而Java8的HashMap对之前做了较大的优化,其中最重要的一个优化就是桶中的元素不再唯一按照链表组合,也 ...

  8. 【集合框架】JDK1.8源码分析之IdentityHashMap(四)

    一.前言 前面已经分析了HashMap与LinkedHashMap,现在我们来分析不太常用的IdentityHashMap,从它的名字上也可以看出来用于表示唯一的HashMap,仔细分析了其源码,发现 ...

  9. Windows下程序打包发布时的小技巧

    一.背景 Windows下开发的应用程序在发布时,需要将其依赖的一些动态链接库一起打进安装包里面去.这个时候,快速确定这个程序到底依赖哪些动态链接库变得非常重要.很久以前写过一篇关于Qt程序安装包制作 ...

  10. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...