原文: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. 前端project师的修真秘籍（css、javascript和其他）

    以我的经验,大部分技术,熟读下列四类书籍就可以. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每一个细节,遇到疑难问题时往往能够在这里得到理论解答,如 ...

  2. 使用shell命令分析统计日志

    用户需要登录统计信息,当分析用户行为,使用shell通常可以很容易地取出了大量的数据.删除,然后放入excel统计. 例如:统计日志含有loadCustomProcess这个地址的訪问,按訪问耗时排序 ...

  3. 读改善c#代码157个建议：建议10~12

    目录: 建议10:创建对象时需要考虑是否实现比较器 建议11:区别对待==与Equals 建议12:重写Equals时也要重写GetHashCode 一.建议10:创建对象时需要考虑是否实现比较器 比 ...

  4. mysql 解压缩和赋权

    拉开拉链mysql紧凑根文件夹 注意ini配置文件的内容 basedir = D:\mysql-5.6.17-winx64  datadir = D:\mysql-5.6.17-winx64  por ...

  5. hdu 1290 竭诚为杭州电礼物50周年

    专门为杭州电50周年礼事 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  6. [置顶] Hibernate从入门到精通（十一）多对多双向关联映射

    上次我们在中Hibernate从入门到精通(十)多对多单向关联映射讲解了一下多对多单向关联映射,这次我们讲解一下七种映射中的最后一种多对多双向关联映射. 多对多双向关联映射 按照我们之前的惯例,先看一 ...

  7. Struts2+Spring+Hibernate step by step 11 ssh拦截验证用户登录到集成

    注意:该系列文章从教师王健写了一部分ssh集成开发指南 引言: 之前没有引入拦截器之前,我们使用Filter过滤器验证用户是否登录,在使用struts2之后,全然能够使用拦截器,验证用户是否已经登录, ...

  8. imagick获取图片的大小bug

    <? php /* imagick的获取图片的高度和宽度函数有问题,使用GD函数可获得正确结果 gd函数 array getimagesize ( string $filename [, arr ...

  9. 编程获取linuxservercpu、内存和磁盘使用

    proc文件系统简介 /proc文件系统是一个伪文件系统.它是唯一的,其中存储器,如果不采取外部存储空间. 它是文件系统提供了与内核进程进行通信的接口的方法.用程序能够通过/proc得到系统的信息.并 ...

  10. php用魔术方法__call实现类函数重载

    因为php是弱类型语言,不喜欢c++通过改变函数返回相同的值键入的参数的数目和功能将过载!但在需求函数的实际发展可能过载.开发需求,我们能够通过魔术方法__call()来实现函数重载. class T ...