ellipsis
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）
ellipsis : 当对象内文本溢出时显示省略标记（...）
text-overflow
我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。假如用标题截取函数，则标题不是完整的，假如我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。但是注意下面情况：
一、仅定义text-overflow:ellipsis; 不能实现省略号效果。
二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。
三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
ul {
width:300px;
margin:30px auto;
}
li {
line-height:25px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
a {
color:#03c;
font-size:14px;
}
a:hover {
color:#333;
}
</style>
</head>
<body>
<ul>
<li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>
<li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>
<li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>
<li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>
<li>同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果</li>
</ul>
</body>
</html>
ellipsis的更多相关文章
- python中的Ellipsis
...在python中居然是个常量 print(...) # Ellipsis 看别人怎么装逼 https://www.keakon.net/2014/12/05/Python%E8%A3%85%E9 ...
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
详解text-overflow 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: clip:当 ...
- css text-overflow:ellipsis 文字多余剪切
text-overflow: ellipsis;多度剪切white-space: nowrap;禁止换行overflow: hidden;多余隐藏
- 关于ellipsis多行换行的方案
WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...
- CSS中的text-overflow:clip|ellipsis的使用
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...,可以使用text-overflow:clip|ellipsis 基本语法:text-over ...
- text-overflow:ellipsis
关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...
- CCS3属性之text-overflow:ellipsis;的用法和注意之处
语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsi ...
- text-overflow:ellipsis实现超出隐藏时省略号显示
text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-s ...
- CSS基础：text-overflow:ellipsis溢出文本
<!DOCTYPE html><html> <head> <title> new document </title> <meta na ...
随机推荐
- 【JSON 注解】JSON循环引用1-----Jackson常用注解介绍 eq:@JsonIgnore
循环引用:实体A与实体B有关系,A中有B作为字段,B中有A作为一个字段.查询A对象后,将A对象转化为JSON格式数据时,会因为序列化过程中导致A中有B字段,B字段中又有A,这样就引起了循环引用的问题! ...
- AchartEngine的柱状图属性设置
1. 修改背景色或设置背景图片 背景色设置需要设置两项:setMarginsColor(设置四边颜色)以及setBackgroundColor(设置中间背景色) 设置背景图片: ...
- J2EE中使用jstl报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar错
一.发现问题 运行引用了jstl的jsp页面 报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or th ...
- AOP静态代理解析2-代码织入
当我们完成了所有的AspectJ的准备工作后便可以进行织入分析了,首先还是从LoadTimeWeaverAwareProcessor开始. LoadTimeWeaverAwareProcessor实现 ...
- 制作一个访问量很高的大型网站，你会如何来管理所有HTML、CSS、JS与图片？
1.先确定全局样式和编码方式. 2.编写习惯,标注样式. 3.文件夹存放,命名.
- ajax上传后用超链接展示无法下载问题
ajax插件上传后用超链接展示出来,但是点击超链接无法下载,最后发现是上传文件名为中文在作怪,于是修改了tomcat配置文件server.xml中的 <Connector port=" ...
- MVC 异常处理机制
方法一 :web.config配置文件的 system.web 接点下添加,若为On则不会将异常信息反馈到用户,而是友好的跳转到error.htm <customErrors mode=&quo ...
- 1.ARC和非ARC文件共存
1.ARC和非ARC文件共存 项目->Build Parses->对应的类 1.1.新项目兼容老的非ARC:-fno-objc-arc 1.2.老项目兼容ARC:-fobjc-arc
- Kafka 分布式消息队列介绍
Kafka 分布式消息队列 类似产品有JBoss.MQ 一.由Linkedln 开源,使用scala开发,有如下几个特点: (1)高吞吐 (2)分布式 (3)支持多语言客户端 (C++.Java) 二 ...
- Open CV 播放视频（2）
演示:读取一个视频,然后播放,ESC退出. #include "stdafx.h" #include <opencv2/core/core.hpp> # ...