这篇文章主要介绍了强制文本在一行内显示，多余字符使用省略号，设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为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. PLSQL_长脚本如何判断需耗时多久v.sql / v.sqltext / v.sqlarea / v.sql_plan及nohup（案例）

    2014-08-27 Created By BaoXinjian

  2. DBA_Oracle AWR Report性能监控报表（案例）

    2014-08-22 Created By BaoXinjian

  3. OAF_EO系列3 - Initialize详解和实现（案例）

    2014-06-14 Created By BaoXinjian

  4. HDU 4539 郑厂长系列故事――排兵布阵(曼哈顿距离)

    这虽然是中文题,然而没看懂,不懂的地方,就是在曼哈顿距离这块,网上搜索了一下,写了个程序,是测试曼哈顿距离的. 曼哈顿距离:两点(x1,y1)(x2,y2)的曼哈顿距离为|x1-x2|+|y1-y2| ...

  5. CF478 B. Random Teams 组合数学 简单题

    n participants of the competition were split into m teams in some manner so that each team has at le ...

  6. C语言小技巧

    /* 求阶乘时设置最大调用层数,防止栈占满 当从函数进入另一个函数时当前函数的内容会入栈,另一个函数调用完时在出栈 */ int factorial(int n, int level) { //pri ...

  7. 转--Android资源总结(环境搭建/ 反编译工具)

    在Android发展前景相当好的情况下,本人最近搜集了一些关于Android的相关资源,当然包含以前发布的博客内容,进行了一次大整合,希望对和我一样是Android的初学者管用,如在文章中有所错误,敬 ...

  8. jQuery-ajax: 取消关注|关注

    ylbtech-jQuery-ajax: 取消关注|关注 1.A,jQuery-效果图返回顶部   1.B,jQuery-Source Code(源代码)返回顶部 <script src=&qu ...

  9. frame动画

    <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android=&q ...

  10. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...