方法一:

复制代码

代码如下:

<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div> 

说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比。

方法二:

复制代码

代码如下:

<input type=”text” style=”width:100%; cursor:default; border-width:0; border-style:none; ” value=”任意长度的字符串” readonly/> 

说明:优点是宽度可以设为百分数。但缺点是内容只能为纯文本,不能有超链接等内容。

CSS 截断字符串实现文字自动截断,代码如下:

复制代码

代码如下:

div.test{ 
width:200px; 
height:14px; 
overflow:hidden; 
white-space:nowrap; 
text-overflow:ellipsis; 
text-overflow: ellipsis;/* IE/Safari */ 
-ms-text-overflow: ellipsis; 
-o-text-overflow: ellipsis;/* Opera */ 
-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ 

关键是text-overflow,其语法如下:

text-overflow:clip | ellipsis

clip:不显示省略标记(...),而是简单的裁切

ellipsis:当对象向内文本溢出时显示省略标记(...)

要注意的是:这个属性是IE专用的!不过,却非只有IE可用。该标签虽然没有被乖哦公开支持采纳,但却被很多浏览器的私有属性所包含。text-overflow单独使用是不起作用的,必须有white-space:nowrap;overflow:hidden;这两句的配合方可。前一句的作用是强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。

不难看出,用text-overflow的最佳场所不是文章的行文,而是用以单行显示的标题或摘要的列表。

语法:

white-space : normal | pre | nowrap

取值:

normal :  默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre :  换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象

nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

说明:

设置或检索对象内空格字符的处理方式。

空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体 来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。

此属性作用于块对象。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 whiteSpace。

 

用CSS截断字符串的两种实用方法的更多相关文章

  1. PHP中将ip地址转成十进制数的两种实用方法

    As we all know that long2ip works as ip1.ip2.ip3.ip4 (123.131.231.212) long ip => (ip1 * 256 * 25 ...

  2. 用CSS截断字符串

    方法一: <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;&q ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. 在PHP代码中处理JSON 格式的字符串的两种方法:

    总结: 在PHP代码中处理JSON 格式的字符串的两种方法: 方法一: $json= '[{"id":"1","name":"\u ...

  5. 在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编

    在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编 ...

  6. spring接收json字符串的两种方式

    一.前言 前几天遇到一个问题,前端H5调用我的springboot一个接口(post方式,@RequestParameter接收参数),传入的参数接收不到.自己测试接口时使用postman的form- ...

  7. css指示箭头两种实现方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. C语言中存储多个字符串的两种方式

    C语言中存储多个字符串的两种方式 方式一    二维字符串数组 声明: char name[][] = { "Justinian", "Momo", " ...

  9. angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

随机推荐

  1. ActionBar 的简单使用

    About ActionBar The action bar is one of the most important design elements you can implement for yo ...

  2. Fragment 整个生命周期

      时间 2014-05-21 17:09:53 CSDN博客原文 http://blog.csdn.net/linfeng24/article/details/26491407 Fragment 生 ...

  3. 第十三篇、Swift_Nav自定义返回按钮后或者隐藏导航栏,Pop返回手势失效的解决方法 Pop全局返回添加的方法

    边缘的pop返回手势: override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = UIColor.purple ...

  4. C# 线程--第三线程池

    概述 线程池有那些优点: 1.在多线程中线程池可以减少我们创建线程,并合理的复用线程池中的线程.因为在线程池中有线程的线程处于等待分配任务状态. 2.不必管理和维护生存周期短暂的线程,不用在创建时为其 ...

  5. 【HTML 5或CSS3入门教程】找兼职撰写人才

    出版社要出版一套HTML 5和CSS 3方向的图书,目前急缺两名写作人员,要求1.熟悉CSS 3的各种属性,或熟悉HTML 5框架2.熟悉各种CSS代码,或熟悉各种HTML 5代码3.有写作的兴趣爱好 ...

  6. ArcSDE for oracle10g安装后post的时候出现错误

    The Post Installation Setup can not locate required Oracle files in your path.Check your Oracle inst ...

  7. 模板:strncpy函数

    参考链接:http://baike.baidu.com/view/1207711.htm strncpy 是 C语言的函数之一,来自 C语言标准库,定义于 string.h,char *strncpy ...

  8. manifest save for self

    一.使用html5的缓存机制 1.先上规则代码:m.manifest CACHE MANIFEST # 2015-04-24 14:20 #直接缓存的文件 CACHE: /templates/spec ...

  9. netty启动过程

    netty先启动work线程,work线程打开selector 绑定pipeline 启动boss线程,绑定端口,注册selector,绑定op_accetp事件 ------------------ ...

  10. Android学习准备

    安装真机调试ADB驱动问题处理 如果在安装驱动时出现"Android Composite ADB Interface"错误,并提示数字签名可能存在那么很可能是因为你的系统是wind ...