<!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>

在CSS3中，text-overflow属性的基本语法如下：

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

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

CSS溢出文本省略（text-overflow）的更多相关文章

  1. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  2. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  3. css溢出文本显示省略号

    css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...

  4. 黑科技：纯CSS定制文本省略

    作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...

  5. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  6. css基础 -文本溢出 text-overflow:ellipsis;

    .className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...

  7. html文本溢出显示省略字符的两种常用方法

    方法一:使用CSS溢出省略的方式解决 解决效果如下: css代码: display: -webkit-box; display: -moz-box; white-space: pre-wrap; wo ...

  8. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  9. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

随机推荐

  1. 开发技巧01——改变Toast显示位置

    1.获得Toast对象——Toast toast = Toast.makeText(this, "Top Left!", Toast.LENGTH_SHORT); 2.Toast对 ...

  2. [转]MVC自定义数据验证（两个时间的比较）

    本文转自:http://www.cnblogs.com/zhangliangzlee/archive/2012/07/26/2610071.html Model: public class Model ...

  3. hdu 4005 边连通度与缩点

    思路:先将图进行缩点,建成一颗树,那么如果这是一条单路径树(即最大点度不超过2),就不在能删的一条边,使得不连通.因为将其头尾相连,形成一个圈,那么删任意一条边,图都是连通的. 上面的是无解的情况,如 ...

  4. truncate 函数用法示例

    --Oracle trunc()函数的用法 /**************日期********************/ select trunc(sysdate) from dual --2015- ...

  5. MJViewController的view的创建

  6. jquery里的宽度详解

    在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(padding)的元素宽度,outerWidth()方法用于获得包括内边界(padding)和边框 ...

  7. 【转载】Apache Kafka监控之Kafka Web Console

    http://www.iteblog.com/archives/1084 Kafka Web Console是一款开源的系统,源码的地址在https://github.com/claudemamo/k ...

  8. iOS开发那些事--性能优化–内存泄露问题的解决(转）

    内存泄漏问题的解决 内存泄漏(Memory Leaks)是当一个对象或变量在使用完成后没有释放掉,这个对象一直占有着这块内存,直到应用停止.如果这种对象过多内存就会耗尽,其它的应用就无法运行.这个问题 ...

  9. CSS之图片关闭

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. PHP学习笔记 - 进阶篇（11）

    PHP学习笔记 - 进阶篇(11) 数据库操作 PHP支持哪些数据库 PHP通过安装相应的扩展来实现数据库操作,现代应用程序的设计离不开数据库的应用,当前主流的数据库有MsSQL,MySQL,Syba ...