CSS3 文本超出后显示省略号...
纯用CSS实现,主要采用代码
overflow:hidden;
text-overflow:ellipsis;//这是让文本溢出后,显示成省略号。
white-space:nowrap;//禁止自动换行
栗子html
<div class="div1"> ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
栗子的css
.div1{
width: 100px;
height: 100px;
border:2px solid black;
overflow:hidden;
text-overflow: ellipsis;
/*-webkit-text-overflow:ellipsis;*/
white-space: nowrap;
}
在ie6~8和chrome下显示都是:
鼠标悬停时显示被省略的内容:
设置CSS
.div1:hover{
overflow:visible;
}
另外:由于这个只是针对溢出文本的效果。所以如果div内是p元素,那么溢出的p元素不会显示成...。至少在ie8+,和chrome中,p元素并不会变成省略号,而是直接被裁剪掉了。
用ietester测试ie6、7则会显示溢出的P元素为省略号。
所以,若想要P元素溢出后也显示成省略号效果,需要单独给p元素设置over-flow:hidden;text-overflow:ellipsis;
ps:关于text-overflow的值:有三个值:
clip|ellipsis|string 默认clip
值 | 描述 | |
---|---|---|
clip | 修剪文本。 | |
ellipsis | 显示省略符号来代表被修剪的文本。 | |
string | 使用给定的字符串来代表被修剪的文本。 |
CSS3 文本超出后显示省略号...的更多相关文章
- CSS3文本超出容器显示省略号之text-overflow属性
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 要想实现文本超出容器时显示省略号,上面3个属性必须同时搭配使用
- css3 文本超出后出现省略号
clip:当内联内容溢出块容器时,将溢出部分裁切掉. ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). 当块容器 <' overflow '> 为非visible时, ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- css兼容大部分浏览器的文本超出部分显示省略号
css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...
- css-文本超出后显示省略号
1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数 ...
- 使用js控制文本超出部分显示省略号
js代码 // 字数限制30字,超出不显示 fontNumber (date) { const length = date.length if (length > 30) { var str = ...
随机推荐
- jmeter+http接口测试
参考: http://blog.csdn.net/github_27109687/article/details/71968662 Jmeter接口测试+压力测试 http://blog.csdn ...
- Linux下多线程下载工具myget
[root@superdba ~]# mytgetMytget 0.0.99: A download accelerator for GNU/LinuxUsage: mytget [options]. ...
- Linux学习笔记之Linux修改或增加ssh端口
1.什么是SSH SSH 为 Secure Shell 由 IETF 的网络工作小组(Network Working Group)所制定: SSH 是建立在应用层和传输层基础上的一种安全协议. SSH ...
- 20145335郝昊《java程序设计》第6周学习总结
20145335郝昊 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 串流(Stream): 数据有来源及目的地,衔接两者的是串流对象.如果要将数据从来源取出,可以使用输入串 ...
- git如何回退单个文件到某一个commit
答:操作步骤如下: 1. git log "filename" (如:git log README) 2. git reset "commit-id" &quo ...
- 解决IE6已终止操作问题
令人崩溃的IE6问题再次出现,打开某个页面时,弹出提示框“Internet Explorer无法打开Internet 站点...已终止操作”. 查了一下资料,感觉“因为js(一个比较复杂的js) ...
- tomcat配置根目录访问后,部署后第一次访问会出现tomcat的默认界面而非项目首页
tomcat配置根目录访问后,部署后第一次访问会出现tomcat的默认界面而非项目首页,而重启后会正常,这个原因是因为在配置文件中有如下配置,造成项目加载两次 <Host name=" ...
- 爬虫框架Scrapy之Downloader Middlewares
反反爬虫相关机制 Some websites implement certain measures to prevent bots from crawling them, with varying d ...
- c++之单例模式
1 本篇主要讨论下多线程下的单例模式实现: 首先是 double check 实现方式: 这种模式可以满足多线程环境下,只产生一个实例. template<typename T> clas ...
- Memcached append 命令
Memcached append 命令用于向已存在 key(键) 的 value(数据值) 后面追加数据 . 语法: append 命令的基本语法格式如下: append key flags expt ...