【问题标题】:Ellipses in center of string(string can be any language ie. Hindi, Tamil etc) using jquery使用 jquery 的字符串中心的省略号(字符串可以是任何语言,即印地语、泰米尔语等)
【发布时间】:2016-12-14 07:00:50
【问题描述】:

在我的文本字段中,我支持各种语言的输入(英语、印地语、泰米尔语等)。当字符串长度大于输入字段时,我想在文本中心显示省略号。 示例:椭圆...唇形

【问题讨论】:

  • 你所说的更大是指它大到足以溢出还是只是字符数?
  • @Fma 字符溢出。当字符串是英文时,我可以将省略号放置在正确的位置。但如果是其他语言(印地语、泰米尔语等),那么我将面临问题
  • stackoverflow.com/questions/1582534/calculating-text-width 在更改时使用此问题的文本宽度计算答案。如果文本宽度大于您的输入字段宽度显示省略号
  • @Fma 请检查示例:jsfiddle.net/Laz536x9 当字符串是其他语言时,我正在使用的子字符串给出了确切的子字符串。

标签: javascript jquery jquery-ui


【解决方案1】:

我做了一个工作示例

<html>
    <body>
        <table><tr><td> 
            <div id="x"></div> 
        </td></tr></table>
        <br/>
        <textarea id="t" onkeyup="foo(100)"></textarea>
        <br/>

        <script>
            function foo(maxSize){
                var x = document.getElementById("x");
                var t = document.getElementById("t");

                var tamil = /[\u0300-\u036f\u1dc0-\u1dff\u20d0-\u20ff\ufe20-\ufe2f\u0b82\u0b83\u0bbe\u0bbf\u0bc0-\u0bc2\u0bc6-\u0bc8\u0bca-\u0bcd\u0bd7]/g
                var hindi = /[\u901\u902\u903\u93c\u93e\u93f\u940\u941\u942\u943\u944\u945\u946\u947\u948\u949\u94a\u94b\u94c\u94d\u951\u952\u953\u954\u962\u963]/g
                var pos = 0;
                for(var i=0; i<2; i++){
                    pos++;
                    while(pos<t.value.length && (t.value.charAt(t.value.length-pos)+"").match(tamil)){
                        pos++;
                    }
                    while(pos<t.value.length && (t.value.charAt(t.value.length-pos)+"").match(hindi)){
                        pos++;
                    }
                }

                var y = t.value.substr(0,t.value.length-pos);
                var ending = t.value.substr(y.length,t.value.length);
                x.innerHTML = y + ending;

                while(x.offsetWidth>maxSize && y.length>1){
                    pos = 1;
                    while(pos<y.length-2 && (y.charAt(y.length-pos-1)+"").match(tamil)){
                        pos++;
                    }
                    while(pos<y.length-2 && (y.charAt(y.length-pos-1)+"").match(hindi)){
                        pos++;
                    }
                    y = y.substr(0,y.length-pos);
                    x.innerHTML = y + "..." + ending;
                }
            };
        </script>
    </body>
</html>

输入文本到textarea,结果显示在div上。 tag table 是为了让 div 不像 body 那样宽。

印地语组合字符from here

泰米尔语组合字符from here

【讨论】:

  • 如果文本是印地语或泰米尔语,我没有得到正确的截断文本。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-02-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-02
  • 1970-01-01
相关资源
最近更新 更多