HTML内超过多少像素以省略号显示

        时间过的很快,转眼来到了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");// 创建span spanNode.appendChild(textNode);// 文本节点加入到span

document.body.appendChild(spanNode);// span加入到body,这时的文本已经过定义的CSS渲染 width = spanNode.offsetWidth;// 得到span宽度

document.body.removeChild(spanNode);// 删除span

return width; }

        这种方式是根据文本动态创建一个span,从而得到文本宽度,效率应该很低。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

1043
来自专栏小筱月

分享一次纯 css 瀑布流 和 js 瀑布流

现在百度图片,360 图片搜索,都是以一种瀑布流的形式展示,那么接下来,分享一波纯 css 瀑布流 和 js 瀑布流

2974
来自专栏進无尽的文章

浅汇-iOS UI布局

  iOS中UI的布局是很重要的,而在前期开发中就要选定好布局的方法,因为这对整个工程乃至于后期的版本维护都有很重要的影响。本文从比较老的Frame到新生Aut...

2972
来自专栏葡萄城控件技术团队

给萌新的Flexbox简易入门教程

近几年,CSS领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox,或者说是弹性盒子布局模块(Flex...

922
来自专栏coding for love

CSS入门9-定位机制

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

693
来自专栏前端说吧

JS-元素大小深入学习-offset、client、scroll等学习研究笔记

2868
来自专栏24K纯开源

用Qt写软件系列四:定制个性化系统托盘菜单

导读     一款流行的软件,往往会在功能渐趋完善的时候,通过改善交互界面来提高用户体验。毕竟,就算再牛逼的产品,躲藏在糟糕的用户界面之后总会让用户心生不满。界...

38710
来自专栏前端说吧

css3-巧用选择器 “:target”

3686
来自专栏狮乐园

HTML is about meaning

HTML标签本身的意义是为了传递对于一个document元素的含义,所以再考虑使用正确的标签表达内容之前,考虑你的网页看起来怎么样为时过早,请将注意力集中到每一...

1243
来自专栏我和我大前端的故事

我不知道你知不知道我知道的伪元素小技巧

伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

1052

扫码关注云+社区

领取腾讯云代金券