<!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. Java设计模式13：常用设计模式之桥接模式（结构型模式）

    1. Java之桥接模式(Bridge Pattern) (1)概述: 首先我们说一个生活中的例子:       就拿汽车在路上行驶的来说.即有小汽车又有公共汽车,它们都不但能在市区中的公路上行驶,也 ...

  2. Android 高级UI设计笔记02：可以拖动交换item位置的GridView（转载）

    如果大家不知道GridView基本使用,可以先参见:Android(java)学习笔记154:使用GridView以及重写BaseAdapter 1. 首先我们明白GridView拖拽的思路: ()根 ...

  3. JS中获取table节点的tr或td的内容

    <table id="tb1" width="200" border="1" cellpadding="4" ce ...

  4. MySQL服务器的SQL模式 (转)

    转自: http://blog.csdn.net/kumu_linux/article/details/8185912 sql_mode的系统变量可以调控MySQL的SQL模式 任何一个客户端可以在不 ...

  5. 通用函数get和set

    这两个函数在画图时很常用,所有对象都有属性来定义它们的特征,正是通过设定这些属性来修正图形显示的方式.尽管许多属性所有的对象都有,但与每一种对象类型(比如坐标轴,线,曲面)相关的属性列表都是独一无二的 ...

  6. 转：OpenResty最佳实践(推荐了解lua语法)

    看点: 1. Lua 语法的说明, 排版清晰易懂. 转: https://moonbingbing.gitbooks.io/openresty-best-practices/content/lua/m ...

  7. 实现类似 QQ音乐网页版 的单页面总结

    最近需要对创业团队的网站进行改版,而我负责前端设计和实现. 下面是一些总结与体会: 当设计完成之前,我就跟和我配合的Java 后台说用iframe实现,结果说麻烦不肯,到最后突然对我说还是用ifram ...

  8. 基本STRUTS标签-学习笔记-Bean标签

    <bean:include> 和标准的JSP标签<jsp:include>很相似,都可以用来包含其他Web资源的内容,区别在于<bean:include>标签把其它 ...

  9. JAVA计算器算法实现

    import java.awt.BorderLayout; import java.awt.GridLayout; import java.awt.event.ActionEvent; import ...

  10. 在Ubuntu下配置Apache多域名服务器

    1. 目标: 在本机 实现访问不同域名 可以访问不同的目录. 即:访问a.com 进入 /var/www/a 目录下的程序,访问b.com 进入/var/www/b目录下的程序. 2.遇到的问题: / ...