<!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. Direct3D-3 四元数

        其实本来这篇文章是打算接上篇的各种变化矩阵的推导了,想了想,还是先讲四元数吧.本人的文章并不会提到欧拉角,因为我自己没弄懂欧拉角的万向锁问题.     很多人学习数学时,会有这样一个疑惑,这东 ...

  2. 用对象型泛型和ArraysList写一个输入学员信息并展示

    题目:录入学员信息并保存,当录入学员的编号为0时结束,展示出学员信息 //student类 public class Student { public int id; public String na ...

  3. 产品设计原则之移动APP【转】

    随着移动互联网的发展,越来越多的Web产品开始布局移动端,因此最近经常碰到PM们在交流讨论移动APP产品的设计.我从事移动互联网已经有一年多了,通过不断的学习和实践也积累了一些心得,今天整理并分享一下 ...

  4. JQUERY 动态时钟

    <script type="text/javascript" src="script/jquery-1.8.3.min.js"></scrip ...

  5. 【BZOJ1212】[HNOI2004]L语言 Trie树

    [BZOJ1212][HNOI2004]L语言 Description 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构 ...

  6. Linux下配置文件的位置

    系统级的配置存放在 /etc 目录中.用户级的配置存放在用户的主目录 /home/user_login_name. SHELL 默认文件 /etc/bashrc – bash shell 的系统级默认 ...

  7. Web前端学习笔记1

    Day1. 1.Windows常用快捷键. 快捷键 功能 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切(复制和剪切后都可以粘贴) ctrl+a 全选 ctrl+s 保存 ctrl+tab ...

  8. .net求两个数的最大公约数和最小公倍数

    最大公约数:指两个或多个整数共有约束中最大的一个. 最小公倍数:如果有一个自然数a能被自然数b整除,则称a为b的倍数,b为a的约数,对于两个整数来说,指该两数共有倍数中最小的一个. /// <s ...

  9. 函数function的方法call()以及apply()

    1.这两个方法十分重要:可以改变函数的作用域,也就是改变函数中的this     使用call()方法的时候,必须明确传入每一个参数,结果跟apply()是一样的,废话不多说,下面来一个简单的案例,便 ...

  10. 在Tomcat中配置基于springside的项目

    注意点: Tomcat默认没有配置Transaction,需要在/Conf/Context.xml配置 1 <Transaction factory="org.objectweb.jo ...