<!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. DefaultSingletonBeanRegistry extends SimpleAliasRegistry implements SingletonBeanRegistry

    // 用于内部标记的空的单例对象(不支持null)protected static final Object NULL_OBJECT = new Object(); // 缓存单例对象根据beanNa ...

  2. Node.js module.exports和exports的区别

    require 用来加载代码,而 exports 和 module.exports 则用来导出代码,从接触node.js就不会它们两陌生,上代码: foo.js exports.a = functio ...

  3. signed char、unsigned char

    什么是无符号char类型?与常见的char类型有何不同? 在c++中有三种不同的字符类型:char,signed char,unsigned char.如果要应用与文本字符,就使用不加限制的char类 ...

  4. javaweb学习总结二十(http响应)

    一:http响应 1:http响应的组成部分 状态行.响应头.空行.响应数据 2:状态行 常用状态码: 200:请求成功 302:请求路径已经转移,请访问别的地址 307或者304: 请访问缓存信息 ...

  5. 转：java服务器安全指南

    转: http://drops.wooyun.org/web/16609 JAVA安全之JAVA服务器安全漫谈 z_zz_zzz · 2016/06/08 10:50 0x00 前言 本文主要针对JA ...

  6. Linux下is not in the sudoers file解决方法

    最近在学习linux,在某个用户(xxx)下使用sudo的时候,提示以下错误:xxx is not in the sudoers file. This incident will be reporte ...

  7. Mirco2440核心板设计思考

    1.核心板架构 注意的是:此处的RAM和ROM都是外置的 硬件框架 S3C2440+ SDRAM + NAND Flash + NOR Flash 也就是 CPU + RAM + ROM 2.S3C2 ...

  8. JS轮播图

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Networking - IPv4 报文格式

    每个 IP 数据报都以一个 IP 报头开始.源计算机的 TCP/IP 软件构造这个 IP 报头,目的计算机的 TCP/IP 软件利用 IP 报头中封装的信息处理数据.IP 报头包含大量信息,包括源 I ...

  10. java内存被释放的小例子

    先贴代码: StringBuilder dada = null; ; i<; i++){ dada = new StringBuilder(); ; j<; j++){ dada.appe ...