用css截取字符 css排版隐藏溢出文本
方法一:
<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; background-color:transparent;” value=”任意长度的字符串” readonly/>
说明:优点是宽度可以设为百分数。但缺点是内容只能为纯文本,不能有超链接等内容。
CSS 截断字符串 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截取字符 css排版隐藏溢出文本的更多相关文章
- CSS截取截取字符长度并显示省略号的方法
HTML部分 <div> <span>这是一个CSS3截取截取字符的例子.它根据宽度来处理.</span> </div> <div class=& ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- CSS溢出文本省略(text-overflow)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
- css单行文本与多行溢出文本的省略号问题
在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- CSS截取中英文混合字符串长度
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- css溢出文本显示省略号
css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...
随机推荐
- iOS -- SKTextureAtlas类
SKTextureAtlas类 继承自 NSObject 符合 NSCodingNSObject(NSObject) 框架 /System/Library/Frameworks/SpriteKi ...
- nginx学习(二)——基础概念之异步非阻塞
上面讲了很多关于nginx的进程模型,接下来,我们来看看nginx是如何处理事件的. 有人可能要问了,nginx采用多worker的方式来处理请求,每个worker里面只有一个主线程,那能够处理的并发 ...
- Android Studio 设置项目Module编码,解决Android Studio项目执行时乱码问题
Android Studio的项目设置逻辑与Eclipse有非常大的差别.运行的操作为File->Setting->File Encodings然后来进行设置,如图所看到的: waterm ...
- 零基础学python-3.7 还有一个程序 python读写文本
今天我们引入另外一个程序,文件的读写 我们先把简单的程序代码贴上.然后通过我们多次的改进.希望最后可以变成一个简单的文本编辑器 以下是我们最简单的代码: 'crudfile--读写文件' def re ...
- mysql 控制台环境下查询中文数据乱码,插入、更新中文数据不成功
mysql 控制台环境下查询中文数据乱码,插入.更新中文数据不成功 登录mysql密码是加入编码参数--default-character-set,中文用gbk mysql -uroo ...
- java 堆和栈一般理解
栈与堆都是Java用来在Ram中存放数据的地方.与C++不同.Java自己主动管理栈和堆.程序猿不能直接地设置栈或堆. Java的堆是一个执行时数据区,类的(对象从中分配空间.这些对象通过new.n ...
- iphone手机连接USB时出现须要Mobile device setup disk上的usbaapl.sys文件
问题: iphone5 手机连接USB出现例如以下弹框 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5nZWwyMnh1/font/5a6L5L2T/ ...
- PythonCookBook笔记——数据结构和算法
数据结构和算法 解包赋值 p = [1, 2, 3] a, b, c = p # _表示被丢弃的值 _, d, _ = p # 可变长解包 *a, b = p # 字串切割解包 line = 'nob ...
- centos7 设置网络
https://lintut.com/how-to-setup-network-after-rhelcentos-7-minimal-installation/ First, type “nmcli ...
- unity3d开发的android应用中增加AD系统的详细步骤
unity3d开发的android应用中增加AD系统的详细步骤 博客分类: Unity3d unity3d Unity3d已经支持android,怎样在程序里增加admob? 试了一下,确实能够, ...