0

In my text field i support input of various languages(English, Hindi, Tamil etc). I want to show ellipses in center of text when the string length is greater then the input field. example: ellip...lipses

Praveen R
  • 11
  • 3
  • By greater do you mean it is big enough to overflow or just number of characters? – Fma Dec 14 '16 at 07:02
  • @Fma overflow of characters. When the string is in english then i am able to place the ellipses in correct position. But if it is in some other language(Hindi, Tamil etc) then i am facing problem – Praveen R Dec 14 '16 at 07:07
  • 1
    http://stackoverflow.com/questions/1582534/calculating-text-width Use the text width calculation answer to this question with on change. If text width is greater than your input field width show ellipses – Fma Dec 14 '16 at 07:09
  • @Fma Pls check the example: https://jsfiddle.net/Laz536x9/ when the string is in other language substring which i am using is giving the exact substring. – Praveen R Dec 14 '16 at 07:28

1 Answers1

0

I've made a working example

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

Input text into textarea, result is displayed on the div. Tag table is for the div to be not as wide as the body.

Hindi combaining characters from here

Tamil combaining characters from here

Community
  • 1
  • 1
Wojciech Tomczyk
  • 96
  • 6