用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 。

赞 (0)

相关推荐

  • 用CSS解决中英文混合字符串的截取省略问题的解决办法

    作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号. 众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销. 随着W

  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /

  • CSS文字截取功能实现代码

    好处是: 兼容IE,firefox,Opera; 有利于内容完整性;有利于SEO; 无需后台程序处理; 可以在前台随时调节要截取的长度. 不好的地方: 不能自动判断截取长度,当字符很短的时候在Firefox中也会生成后面的省略符号. 另外在设置截取宽度的时候,要注意,尽量让文字截取完整. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • 用css截取字符的几种方法详解（css排版隐藏溢出文本）

    方法一: 复制代码 代码如下: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串  </div> 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. 方法二: 复制代码 代码如下: <

  • JS截取字符串的三种方法详解

    JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" 使用两个参数 alert(stmp.slice(1

  • C#中截取字符串的的基本方法详解

    分享几个经常用到的字符串的截取 string str="123abc456"; int i=3; 1 取字符串的前i个字符 str=str.Substring(0,i); // orstr=str.Remove(i,str.Length-i); 2 去掉字符串的前i个字符: str=str.Remove(0,i); // or str=str.Substring(i); 3 从右边开始取i个字符: str=str.Substring(str.Length-i); // or str=s

  • Python3日期与时间戳转换的几种方法详解

    日期和时间的相互转换可以利用Python内置模块 time 和 datetime 完成,且有多种方法供我们选择,当然转换时我们可以直接利用当前时间或指定的字符串格式的时间格式. 获取当前时间转换 我们可以利用内置模块 datetime 获取当前时间,然后将其转换为对应的时间戳. import datetime import time # 获取当前时间 dtime = datetime.datetime.now() un_time = time.mktime(dtime.timetuple())

  • Python获取网络时间戳的两种方法详解

    目录 方法一 代码实现 调用方法 返回结果 方法二 代码实现 调用方法 返回结果 在我们进行注册码的有效期验证时,通常使用获取网络时间的方式来进行比对. 以下为获取网络时间的几种方式. 方法一 需要的时间会比较长,个别电脑上可能会出现不兼容现象 代码实现 def get_web_server_time(self, host_URL, year_str='-', time_str=':'): ''' 获取网络时间,需要的时间会比较长,个别电脑上可能会出现不兼容现象 :param host_URL:

  • C语言实现字符串字符反向排列的方法详解

    C语言实现字符串字符反向排列的方法详解

    目录 前言 非递归方法 1.循环实现 2.函数实现 递归方法 1.递归方法 2.递归方法 小结 前言 重点的话说在前头,注意不是逆序打印 今天写题,碰到一个很好的题,在这里来个大家做个分享,我会用多种方法来解决 题目具体内容如下: 编写一个函数(递归实现) 实现:将参数字符串中的字符反向排列,不是逆序打印. 要求:不能使用C函数库中的字符串操作函数 但是这里我不会仅仅局限于题目的要求 非递归方法 1.循环实现 1.1循环实现(sizeof) #include <stdio.h> int mai

  • C#给Word中的字符添加着重号的方法详解

    C#给Word中的字符添加着重号的方法详解

    目录 前言 引入dll 方法1 方法2 添加强调符号 C# vb.net 前言 在Word中添加着重号,即强调符号,可以在选中字符后,鼠标右键点击,选择“字体”,在窗口中可直接选择“着重号”添加到文字,用以对重要文字内容起加强提醒的目的,如下图: 通过C#,我们可以查找到需要添加着重号的字符串,然后通过字符串格式的属性值来添加符号.下面,将对此做详细介绍. 引入dll 方法1 手动引入 将 Free Spire.Doc for .NET 下载到本地,解压,安装.安装完成后,找到安装路径下BIN文

  • Python实现解析参数的三种方法详解

    Python实现解析参数的三种方法详解

    目录 先决条件 使用 argparse 使用 JSON 文件 使用 YAML 文件 最后的想法 今天我们分享的主要目的就是通过在 Python 中使用命令行和配置文件来提高代码的效率 Let's go! 我们以机器学习当中的调参过程来进行实践,有三种方式可供选择.第一个选项是使用 argparse,它是一个流行的 Python 模块,专门用于命令行解析:另一种方法是读取 JSON 文件,我们可以在其中放置所有超参数:第三种也是鲜为人知的方法是使用 YAML 文件!好奇吗,让我们开始吧! 先决条件

  • Springboot配置返回日期格式化五种方法详解

    目录 格式化全局时间字段 1.前端时间格式化(不做无情人) 2.SimpleDateFormat格式化(不推荐) 3.DateTimeFormatter格式化(不推荐) 4.全局时间格式化(推荐) 实现原理分析 5.部分时间格式化(推荐) 总结 应急就这样 格式化全局时间字段 在yml中添加如下配置: spring.jackson.date-format=yyyy-MM-dd HH:mm:ss 或者 spring: jackson: ## 格式为yyyy-MM-dd HH:mm:ss date-

  • C语言实现短字符串压缩的三种方法详解

    C语言实现短字符串压缩的三种方法详解

    目录 前言 一.通用算法的短字符压缩 二.短字符串压缩 (1)Smaz (2)Shoco (3)Unisox2 三.总结 前言 上一篇探索了LZ4的压缩和解压性能,以及对LZ4和ZSTD的压缩.解压性能进行了横向对比.文末的最后也给了一个彩蛋:任意长度的字符串都可以被ZSTD.LZ4之类的压缩算压缩得很好吗? 本篇我们就来一探究竟. 一.通用算法的短字符压缩 开门见山,我们使用一段比较短的文本:Narrator: It is raining today. So, Peppa and George

随机推荐