HTML内超过多少像素以省略号显示
来源:互联网 发布:大神note3移动版选网络 编辑:程序博客网 时间:2024/04/29 02:57
时间过的很快,转眼来到了2013年,我在北京工作也一年有余,静下心来,回头想想,自己貌似一年内没有成长多少,或者说成长的很少,反正自己没有看到,公司年终总结都不知道说些什么。今年是蛇年,是很多人的本命年,包括我,2012年一些事情没有做完,争取春节前做完。进入正题。
很多时候都有这种需求,页面上的文字显示不下,需要以省略号代替,可能有些人会想到通过控制文字的长度实现,的确,在已知的文字样式下,如果文字全是中文或者全是非中文是可以通过长度来控制的,但是我们的情况通常是中英文混合,这种方式就不适用了,下面总结了几种方式,适用于不同的情况。
1. 通过CSS控制
<html><head><style type="text/css">body{font-family:Arial, Helvetica, sans-serif;/* 字体 */font-size:12px;/* 字体大小12像素 */}a{width: 140px;/* 要显示文字的宽度 */float: left;/* 左对齐,不设置的话只在IE下好用 */overflow: hidden; /* 超出的部分隐藏起来 */white-space: nowrap;/* 不显示的地方用省略号...代替 */text-overflow: ellipsis;/* 支持 IE */-o-text-overflow: ellipsis;/* 支持 Opera */}</style></head><body><a href="#">CSS截取字符串,超出用省略号代替</a></body></html>
通过CSS控制不需要改变文本本身,可以在页面渲染的时候就控制如何显示了,并且可以通用,缺点是只能在文字尾部加省略号,但有的时候我想要这种格式,“测试-看我有多长看我....doc”,如果文本过长的话,.doc前的文本加省略号,保留格式标志,这种CSS就无法控制了。
2. 通过改变要显示的文本,前提是动态网站,思路是后台语言取得文本内容后,在显示在前台前,根据页面当前字体样式动态改变文本。
Font font = new Font("SansSerif", Font.PLAIN, 12);Button button = new Button();FontMetrics metrics = button.getFontMetrics(font);String info = "CSS截取字符串,超出用省略号代替";String temp = info;while(metrics.stringWidth(temp) > 140) {temp = temp.substring(0, temp.length() - 1);}System.out.println(temp + "...");
这是用AWT算的,这种方式有点2。
3. 通过JavaScript计算
function test() {var info = "CSS截取字符串,超出用省略号代替";var temp = info;while(getTextWidth(temp) > 140) {temp = temp.substring(0, temp.length - 1);}console.log(temp + "...");}function getTextWidth(info) {var width;var textNode = document.createTextNode(info);// 根据文本创建文本节点var spanNode = document.createElement("span");// 创建spanspanNode.appendChild(textNode);// 文本节点加入到spandocument.body.appendChild(spanNode);// span加入到body,这时的文本已经过定义的CSS渲染width = spanNode.offsetWidth;// 得到span宽度document.body.removeChild(spanNode);// 删除spanreturn width;}
这种方式是根据文本动态创建一个span,从而得到文本宽度,效率应该很低。
- HTML内超过多少像素以省略号显示
- html文字超过部分显示为省略号
- 内容超过长度后以省略号显示的方法
- CSS控制TD内字数长度 省略号 css截取 超过 显示 省略号
- textview显示字数的问题或者是限制显示多少行,超过用省略号表示
- 超过表格宽度显示省略号
- 如何让li中内容显示超过长度后以省略号显示
- 如何让li中内容显示超过长度后以省略号显示
- LI中内容超过长度后以省略号显示的方法
- LI中内容超过长度后以省略号显示的方法
- li中内容超过长度后以省略号显示的…
- LI中内容超过长度后以省略号显示的方法
- DIV内只显示两行文字,超过的用省略号
- android开发之当设置textview多少字后以省略号显示。限制TextView的字数
- PHP超过一定长度显示省略号[转]
- css text-overflow 超过宽度显示省略号
- 文字超过一定字数用省略号显示
- 文本超过单行/多行时显示省略号
- 做好2013的经营
- 拿掉和添点
- 沟通需要面对面
- Silverlight Voice/Video Conferencing Modules + WCS Product
- 未来你靠什么?
- HTML内超过多少像素以省略号显示
- Longest Lines(Python版)
- 智立更生训练营
- 有时候
- 我回来了
- 快速排序c实现(代码来自c programming language)
- 会话技术
- 线性时间排序的性能比较
- 自己看的一些东西