当我们使用css的控制文本的时候,时常会出现文本的数据比容器宽的情况,这是因为用户的输入是不可控制的,而此时,为了获得较好的用户体验,可以采用在输入长度大于容器所能容纳的最大宽度时,用省略号代替长出的部分,这里有两种常用的方式:
1.css 方式
css code
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
设置这三行后,大部分浏览器都会将超出的部分显示成下图的效果
此处在ff中有些问题,因为ff不认识text-overflow: ellipsis;这个属性,可以通过max-width来进行控制。
当然,如果需要在鼠标hover的时候展示出全文的话,关键在于将overflow属性置为inherit; 就可以了。
2.js方式
js方式其实很简单,只需要给在输入后,判断文本的长度是不是长于限制宽度,并对得到的字符串进行阶段,然后给字符串手动的添加上3个点就Ok了。
比如:
js code
var str = '我是一个超长的字符串';
var cutStr = str.substr(0, 5) + '...';// output:'我是一个超...'
使用以上代码并将cutStr输出到页面上就完事大吉了,当需要回复是可以给元素绑定mouseover等事件,并将str输出到页面上。
综上,js和css方式虽然都可以实现,但是明显js控制较为复杂,性能也较差,css方式作为简单而有效的方式,确为上佳选择。但是css方式兼容性有点捉急,对于低版本浏览器,还真的是比较悲剧。所以,具体使用哪种方式,可能真的需要视情况而定,甚至可能两者一同使用。当然,对于只考虑现代浏览器的情况下,首选css方式啦。
更多内容请查看zakwu的小站
相关推荐
效果描述: 在文字列表或者文章显示方面,我们经常碰到文字内容超过文本框的情况 这个时候往往需要将多余的文字以.... 2、将body中的代码部分拷贝过去即可 (IE版本浏览器兼容性较差,此效果尤其适合移动端)
在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...
中的一部分,以一般的文本编辑器就可以连同HTML一... www.51foru.com/index008jsjc.htm 19K 2003-12-10 - 百度快照 C Java PHP Perl Python的程序代码美化工具使用 ...php) 一个速度很快的C/C++/Java源代码美化工具。...
2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: 用CSS实现...
javascript 实现文本使用省略号替代 实现效果图: 如果图片不清晰,建议放大浏览器的尺寸进行查看 1.这里是配合jQuery来进行替换的,所以jquery还是必备的,毕竟是轻量级,而且对各大的浏览器兼容性也好。所以开始页面...
wpf Textblock 文字过长时,中间用省略号代替。有好的方法,请回复
话不多说,我们直接看代码 <!DOCTYPE ...<... <head>...超过的文字用省略号代替的js写法</title> </head> <bo
1637.5.3 使用分隔文本文件 1657.5.4 处理宽度固定的文本文件 1667.5.5 追加文本数据到一个现有的表 1677.6 使用剪贴板导入数据 1677.6.1 向一个表粘贴新记录 1687.6.2 通过从剪贴板上粘贴来替换记录 1707.7 从...
1637.5.3 使用分隔文本文件 1657.5.4 处理宽度固定的文本文件 1667.5.5 追加文本数据到一个现有的表 1677.6 使用剪贴板导入数据 1677.6.1 向一个表粘贴新记录 1687.6.2 通过从剪贴板上粘贴来替换记录 1707.7 从...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1637.5.3 使用分隔文本文件 1657.5.4 处理宽度固定的文本文件 1667.5.5 追加文本数据到一个现有的表 1677.6 使用剪贴板导入数据 1677.6.1 向一个表粘贴新记录 1687.6.2 通过从剪贴板上粘贴来替换记录 1707.7 从...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1637.5.3 使用分隔文本文件 1657.5.4 处理宽度固定的文本文件 1667.5.5 追加文本数据到一个现有的表 1677.6 使用剪贴板导入数据 1677.6.1 向一个表粘贴新记录 1687.6.2 通过从剪贴板上粘贴来替换记录 1707.7 从...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...
1567.4 使用Microsoft Outlook和Exchange文件夹 1567.4.1 用Outlook导出和导入Jet 4.0表 1577.4.2 使用Exchange/Outlook向导的链接 1597.5 导入文本文件 1607.5.1 使用导入文本向导 1617.5.2 导入文本向导的高级选项...