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

最新推荐文章于 2025-08-13 21:05:35 发布

最新推荐文章于 2025-08-13 21:05:35 发布 · 162 阅读

文章标签：

#javascript #ViewUI

本文探讨了网页上文字过长时采用的不同截断方法，包括使用CSS、JavaScript及后台语言实现文字显示的控制与优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时间过的很快，转眼来到了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，从而得到文本宽度，效率应该很低。