原文:CSS学习笔记:溢出文本省略(text-overflow)

在CSS3中,text-overflow属性的基本语法如下:

  • clip:表示不显示省略文本,简单的裁切。
  • ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。
  • ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word)。

实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应该在定义两个样式:强制文本在一行内显示(white-space:nowrap)和溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示为省略号效果。

案例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
dl{
width:240px;
border: solid 1px #ccc;
}
dt{
padding:8px 8px;
background: #7fecad;
font-size: 13px;
text-align: left;
font-weight: bold;
color: #71790c;
margin-bottom: 12px;
border-bottom: solid 1px #efefef;
}
dd{
font-size: 0.78em;
height: 1.5em;
width: 220px;
padding:2px 2px 2px 18px;
margin:2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<dl>
<dt>体育新闻</dt>
<dd>亚运会在韩国港口城市仁川开幕,韩国总统朴槿惠出席</dd>
<dd>在亚运会首日,韩国军团占据奖牌榜第一位</dd>
<dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>
<dd>亚运会在韩国港口城市仁川开幕,韩国总统朴槿惠出席</dd>
<dd>在亚运会首日,韩国军团占据奖牌榜第一位</dd>
<dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>
</dl>
</body>
</html>

效果:

CSS学习笔记:溢出文本省略(text-overflow)的更多相关文章

  1. CSS学习笔记:文本换行显示(word-wrap)

    在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. ...

  2. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  3. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  4. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  5. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  6. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  7. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  8. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  9. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

随机推荐

  1. QlikView线图高亮选择尺寸

    作为标题,如今,学生问我一个问题.尺寸Month.expression它是Count(Id). 这个图是一个折线图,不管你选择哪个月的其他下拉列表,销售量.由于Expression里面是这样写的 Co ...

  2. 站长VS微商 你选择哪个?

    近期,站长圈里盛行起了一阵面膜风.我刷空间和微信朋友圈的时候,常常看到一些朋友在卖面膜,不光女童鞋在卖,男屌丝站长也在卖. 不光普通人在卖.行业圈的自媒体明星大佬也在卖. 我们暂且称卖面膜的童鞋为微商 ...

  3. 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译

    原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...

  4. Ad Hoc

    Ad Hoc源自于拉丁语,意思是"for this"引申为"for this purpose only",即"为某种目的设置的,特别的"意思 ...

  5. [Elasticsearch] 部分匹配 (一) - 前缀查询

    部分匹配(Partial Matching) 敏锐的读者可能已经发现到眼下为止,介绍的查询都是在整个词条层面进行操作的. 匹配的最小单元必须是一个词条.你仅仅能找到存在于倒排索引(Inverted I ...

  6. 如何出色的研究 RGSS3 (三) 形式的调整的细节

    在一个我们研究了添加到窗体方法的选择,这个问题来研究窗体类的细节. 所有形式的父类的 Window_Base 四个参数需要初始化. #--------------------------------- ...

  7. SOA两个接口通常用于实现更:SOAP vs REST

    SOA协作架构异构系统,因此,一个跨操作系统的需求.跨语言的通用信息交换格公式. SOAP和REST它们是基于消息正文文本,在跨平台方面相比二进制消息优点.因此,作为选择SOA实施通常用于界面.但SO ...

  8. 如何解决Ora-04031错误(转)

    诊断并解决ORA-04031 错误 当我们在共享池中试图分配大片的连续内存失败的时候,Oracle首先清除池中当前没使用的所有对象,使空闲内存块合并.如果仍然没有足够大单个的大块内存满足请求,就会产生 ...

  9. i++与++i哪个效率更高

    简单的比较前缀自增运算符和后缀自增运算符的效率是片面的, 因为存在很多因素影响这个问题的答案. 首先考虑内建数据类型的情况: 如果自增运算表达式的结果没有被使用, 而是仅仅简单地用于增加一元操作数, ...

  10. hdu4864Task(馋)

    主题链接: 啊哈哈.点我 题目: Task Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...