这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。对应的脚本特性为textOverflow

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。对应的脚本特性为textOverflow。

复制代码

代码如下:

<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div> 

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。  

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果  

三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果:

Tag:一行内显示   多余字符   省略号

原文:http://www.jb51.net/css/146134.html

CSS强制文本在一行内显示若有多余字符则使用省略号表示的更多相关文章

  1. CSS控制文本在一行内显示,若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  2. 用CSS让字体在一行内显示不换行(收藏)

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  3. 用CSS让字体在一行内显示不换行

    青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小  当一行文字超过DIV或者Table的宽度的时候,浏览器 ...

  4. CSS控制字体在一行内显示不换行

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...

  5. CSS+DIV实现文字一行内显示,并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  6. css让文字在一行内显示

    1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...

  7. CSS实现文本超过指定长度显示省略号

    <style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...

  8. white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行

    日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br&g ...

  9. CSS浮动属性,知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

随机推荐

  1. Educational Codeforces Round 15 Cellular Network

    Cellular Network 题意: 给n个城市,m个加油站,要让m个加油站都覆盖n个城市,求最小的加油范围r是多少. 题解: 枚举每个城市,二分查找最近的加油站,每次更新答案即可,注意二分的时候 ...

  2. mysqli 操作数据库

    从php5.0开始增加mysql(i)支持 , 新加的功能都以对象的形式添加 i表示改进的意思 功能多.效率高.稳定 编译时参数: ./configure --with-mysql=/usr/bin/ ...

  3. poj 2567 Code the Tree 河南第七届省赛

    Code the Tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2350   Accepted: 906 Desc ...

  4. Studio右键选项中没有Git?

    从Git clone一个Project并打开后,都会习惯性的像使用Eclipse一样,选中工程右键,选择Git的对应版本控制选项. 如下图,你只看到了svn. 如何配置才能在右键选项中看到Git呢,我 ...

  5. 转-Android联网 — HttpURLConnection和HttpClient选择哪个好?

    http://www.ituring.com.cn/article/199619?utm_source=tuicool 在Android开发中,访问网络我们是选择HttpURLConnection还是 ...

  6. linux下安装easy_install的方法

    python中的easy_install工具,类似于Php中的pear,或者Ruby中的gem,或者Perl中的cpan,那是相当的爽歪歪了如果想使用 如果想使用easy_install工具,可能需要 ...

  7. 将博客搬至51CTO

    为了统一博客文章,将文章搬至51cto个人博客

  8. ios统计代码行数

    要统计ios开发代码,包括头文件的,终端命令进入项目目录下,命令如下 列出每个文件的行数: find . -name "*.m" -or -name "*.h" ...

  9. c#创建、保存excel正常执行

    源地址:http://blog.csdn.net/hui_shixu/article/details/5785029

  10. 官网下载jdk

    http://www.oracle.com/technetwork/java/javase/downloads/index.html 第一步: 第二步:默认是显示最新版本的,如果需要其他版本的,拖到最 ...