CSS3文本溢出显示省略号
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
CSS3文本溢出显示省略号的更多相关文章
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
- 长文本溢出显示省略号(…) text-overflow: ellipsis
text-overflow 属性规定当文本溢出包含元素时发生的事情. 默认值: clip 继承性: no 版本: CSS3 JavaScript 语法: object .style.textOverf ...
- ZH奶酪:HTML元素文本溢出显示省略号(...)
一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...
- 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法
一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...
- WEB-CSS实现单行(多行)文本溢出显示省略号
//单行文本溢出部分隐藏显示省略号...overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /** n 行文本溢出部分隐藏显示 ...
随机推荐
- iOS开发——高级技术&本地化与国际化详解
本地化与国际化详解 效果如下: 英语: 中文: 具体实现如下: ...
- javascript技术难点(三)之this、new、apply和call详解
4) this.new.call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本 ...
- lua中的string类型
在lua中用union TString来表示字符串类型 lobject.h: 其中结构体tsv中 reserved字段表示字符串是不是保留关键字,hash是其哈希值,len是其长度.我们在TStrin ...
- google浏览器截图工具 Open Screenshot(代码截图)
有的时候特别想把自己写的代码保存为图片,但是代码的内容很长,用普通的截图工具只能一次一次的拼接起来,太麻烦了.这里使用了Google的截图插件,很好用. 或者使用360极速浏览器-->保存网页也 ...
- C#:Md5和Sha1两种加密方式
1.新建控制台应用程序 2.新建类 EncryptHelper.cs public static class EncryptHelper { /// <summary> /// 基于Md5 ...
- MySQL密码忘记,怎么办?
如果哪天你忘记了线上MySQL数据库的root密码,怎么办? 大家往往会想到skip-grant-tables参数,具体步骤如下: 1. 关闭MySQL数据库,因为root密码忘记了,mysqladm ...
- 如何在制作jar包时引用第三方jar包
我用的是Eclipse打包,但在CMD窗口执行的时候报“ActiveMQ.jar中没有主清单属性”错误. 在网上搜了下,这个与MANIFEST.MF文件有关,该文件没有定义MAIN方法所在类的路径,利 ...
- Android之探究viewGroup自定义子属性参数的获取流程
通常会疑惑,当使用不同的布局方式时,子view得布局属性就不太一样,比如当父布局是LinearLayout时,子view就能有效的使用它的一些布局属性如layout_weight.weightSum. ...
- SPRING多个占位符配置文件解析源码研究--转
原文地址:http://www.cnphp6.com/archives/85639 Spring配置文件: <context:property-placeholder location=&quo ...
- PJAX实现
一.浏览器历史API 浏览器历史就像一堆卡片,如下所示: