<!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. Modified LCS

    Input Output Sample Input 3 5 3 4 15 3 1 10 2 2 7 3 3 100 1 1 100 1 2 Sample Output 4 3 50超时代码,因为K很大 ...

  2. Android 高级UI设计笔记09：Android如何实现无限滚动列表

    ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...

  3. 慕课网，我的yii2学习笔记（基础篇）

    一.关于PHP知识点 1.命名空间:存放类文件的空间,可以随便定义,建议与类文件目录一致,方便管理. 注:(1).如果类没有设置命名空间,默认为顶级命名空间,在程序中可以用一下方式实例化. $mode ...

  4. ES各种错误解决

    _update API 执行报错 错误信息: { "error": { "root_cause": [ { "type": "re ...

  5. [未完成]关于Java网络编程总结

    网络的七层结构: 第一层:物理层,网线. 第二层: 数据链路层,交换机.交换机有IP地址.这一层的数据叫做帧 第三层:网络层,数据包方向的定义,路由器.现在也有具有路由功能的交换机.主要将从下层接收到 ...

  6. Oracle查询被锁的表及进程的方法

    Oracle查询可以有多种方法,下面为您介绍的是如何Oracle查询被锁的表及Oracle查询连接的进程的方法,希望对您能够有所帮助. 一.查看被锁的表 select p.spid,a.serial# ...

  7. Microsoft.Practices.EnterpriseLibrary企业库问题

    System.Configuration.ConfigurationErrorsException: Invalid TraceListenerData type in configuration ' ...

  8. jqueryeasyui中文乱码问题

    下载的Demo中charset=utf-8,手动改成gb3212,问题解决.

  9. Android 侧滑菜单的简单实现（SlidingMenu）二

    在上一篇博文中已经简单的实现了侧滑菜单,代码也很简单,就几行代码. 这篇文章依然讲侧滑菜单,与前一篇文章不同的是,这篇文章用不同的代码方式来实现侧滑菜单. 在前面的文章中已经用了在Activity中通 ...

  10. C# DateTime格式化

    DateTime. ToString() -- :: ToBinary() - ToFileTime() ToFileTimeUtc() ToLocalTime() -- :: ToLongDateS ...