JS 字符串截取-CFANZ编程社区

我的使用

//字符串截取
//str:值
//number:要截取的长度
 function jiequ(str,number) {
   if(str.length>=number)
   str=str.substr(0, number) + '...' 
   return str;
 }

完整例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串截取</title>
</head>

<body>
    <h1>字符串截取</h1>
    <br>
    <hr>
    <br>
    <div>
        <span>这是一个CSS3截取截取字符的例子。它根据宽度来处理。</span>
    </div>
    <div class="ut">
        <span>无用占位</span>
        <a href="#" title="这是一个CSS3截取截取字符的例子。它根据宽度来处理。">这是一个CSS3截取截取字符的例子。它根据宽度来处理。</a>
    </div>
    <font color="red">注：本写法非本人发明，这样仅介绍了原理。其中当出现多个块显示在一行时截取功能的块只能放最后，由于设置浮动宽度将失效</font>
    <style>
        a {
            display: block;
            /* 当前元素本身是inline的，因此需要设置成block模式 */
            white-space: nowrap;
            /* 因为设置了block，所以需要设```置nowrap来确保不换行 */
            overflow: hidden;
            /* 超出隐藏结合width使用截取采用效果*/
            text-overflow: ellipsis;
            /* 本功能的主要功臣，超出部分的剪裁方式 */
            -o-text-overflow: ellipsis;
            /* 特定浏览器前缀 */
            text-decoration: none;
            /* 无用 */
        }

        .ut {
            width: 200px;
            /* 测试长度 */
        }

        .ut span {
            float: left;
            /* 测试一行显示多块 */
        }
    </style>

    <script>

        //    补充：substr 和 substring方法的区别

        //    一、substr 方法
        //    返回一个从指定位置开始的指定长度的子字符串。
        //    stringvar.substr(start [, length ])
        //    参数
        //    stringvar
        //    必选项。要提取子字符串的字符串文字或 String 对象。
        //    start
        //    必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
        //    length
        //    可选项。在返回的子字符串中应包括的字符个数。
        //    说明
        //    如果 length 为 0 或负数，将返回一个空字符串。如果没有指定该参数，则子字符串将延续到 stringvar 的最后。

        //    示例
        //    下面的示例演示了substr 方法的用法。
        function SubstrDemo() {
            var s, ss;        // 声明变量。
            var s = "The rain in Spain falls mainly in the plain..";
            ss = s.substr(12, 5); // 获取子字符串。
            console.log("substr()返回值==");
            console.log(ss);// 返回 "Spain"。 
        }
        SubstrDemo();
        //    二、substring 方法
        //    返回位于 String 对象中指定位置的子字符串。
        //    strVariable.substring(start, end)
        //    "String Literal".substring(start, end)
        //    参数
        //    start
        //    指明子字符串的起始位置，该索引从 0 开始起算。
        //    end
        //    指明子字符串的结束位置，该索引从 0 开始起算。
        //    说明
        //    substring 方法将返回一个包含从 start 到最后（不包含 end ）的子字符串的字符串。
        //    substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。例如， strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。
        //    如果 start 或 end 为 NaN 或者负数，那么将其替换为0。
        //    子字符串的长度等于 start 和 end 之差的绝对值。例如，在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。

        //    示例
        //    下面的示例演示了 substring 方法的用法。
        function SubstringDemo() {
            var ss; // 声明变量。
            var s = "The rain in Spain falls mainly in the plain..";
            ss = s.substring(12, 17); // 取子字符串。
            console.log("substring()返回值==");
            console.log(ss);// 返回 "Spain"。  
        }
        SubstringDemo();
    </script>
</body>

</html>