用省略号代替span中的长文字

最新推荐文章于 2023-02-17 15:32:01 发布

转载最新推荐文章于 2023-02-17 15:32:01 发布 · 477 阅读

文章标签：

#前端

web 专栏收录该内容

0 篇文章

订阅专栏

本文介绍三种方法实现文本过长时使用省略号显示：通过CSS样式控制、利用后端语言动态调整文本长度及JavaScript计算文本宽度。每种方法都有其适用场景和局限。

用省略号代替span中的长文字。

1. 通过CSS控制

[html] view plain copy

print ?

<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. 通过改变要显示的文本，前提是动态网站，思路是后台语言取得文本内容后，在显示在前台前，根据页面当前字体样式动态改变文本。

[java] view plain copy

print ?

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计算

[javascript] view plain copy

print ?

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;
}