test-overflow:ellipsis的应用----转载
关键字: text-overflow:ellipsis
语法:text-overflow : clip | ellipsis
取值:
clip :默认值 。不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里 .
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...
这样写:例如
Html代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <style type="text/css">
- #box{width:100px;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
- </style>
- </head>
- <body>
- <div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>
- </body>
- </html>
注意:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.
如果容器是table,当文字内容过多时,不换行,而是出现...
这样写:例如
Html代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <style type="text/css">
- table{table-layout:fixed;width:106px;}
- td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
- </style>
- </head>
- <body>
- <table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">table{table-layout:fixed;width:106px;}td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}</style></head><body><table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table>
</body></html>
注意:
1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。
其它的要点和上面一样
text-overflow 的兼容性:
测过ie6,ie7,ff3,safari,opera,chorme,只有ff3和opera不兼容
test-overflow:ellipsis的应用----转载的更多相关文章
- 转:CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- overflow属性-摘自网友
关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...
- css & text-overflow & ellipsis
css & text-overflow & ellipsis https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflo ...
- css & multi line words & ellipsis
css & multi line words & ellipsis bug .news-card-content-title { width: 100%; height: 0.8rem ...
- 【转载】C# 中的委托和事件(详解)
<div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...
- CSS选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- text-overflow:ellipsis 的应用(转载)
关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...
- 【转载】Stack Overflow: The Architecture - 2016 Edition
转载:http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi?utm_source=tuicool&utm_ ...
随机推荐
- P5280 [ZJOI2019]线段树
题目链接:洛谷 题目描述:[比较复杂,建议看原题] 这道题太神仙了,线段树上做树形dp. 根据树形dp的套路,都是按照转移的不同情况给节点分类.这里每次modify的时候对于节点的影响也不同,所以我们 ...
- java框架之SpringBoot(4)-资源映射&thymeleaf
资源映射 静态资源映射 查看 SpringMVC 的自动配置类,里面有一个配置静态资源映射的方法: @Override public void addResourceHandlers(Resource ...
- mysql 远程登录
mysql -h 192.168.5.116 -P 3306 -u root -p123456
- CentOS 7 下使用yum安装MySQL5.7.20
CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ,但是CentOS7的yum源中默认好像是没有mysql的. 上一篇安装的是5.6的但是我想安装5.7的 yum安装是最简单 ...
- python_字符串的格式化输出
name = input("Name:")age = int(input("Age:")) input: 输入的内容默认为字符串格式job = input(&q ...
- cocos creator怎么隐藏组件(setVisible)
以 label 为例: this.label.node.active = fasle 隐藏节点this.label.ndoe.active = true显示节点
- Go 初体验 - 令人惊叹的语法 - defer.3 - defer 函数参数计算时机
defer 函数的参数计算时机 定义一个 defer 函数,接收参数 n: 调用: 输出: 有点惊讶,为什么不是 100 200 200? go 语言里,defer 函数的参数是在定义位置被计算的,也 ...
- linux系统(rpm与deb环境),JAVA JDK的配置
步骤一:(配置 JAVA JDK DEB系列linux系统) 1,下载JAVA JDK 1.1.官网下载java JDK (最好为1.7及以上版本) 下载地址http://www.oracle.co ...
- K8S学习笔记之k8s日志收集实战
0x00 简介 本文主要介绍在k8s中收集应用的日志方案,应用运行中日志,一般情况下都需要收集存储到一个集中的日志管理系统中,可以方便对日志进行分析统计,监控,甚至用于机器学习,智能分析应用系统问题, ...
- Docker Swarm 常用命令
# 管理配置文件 docker config # 查看已创建配置文件 - docker config ls # 将已有配置文件添加到docker配置文件中 - dock ...