0

[UPDATE]: I later on figure out a stupid way to handle it(not always works, but most time):

Style:

        #txt_ruler {
            position: fixed;
            top: -100px;
            left:-100px;
            visibility: hidden;
        }

HTML:

        <div id="txt_ruler"></div>

JS:

        String.prototype.visualLength = function(style) {
            var ruler = $("#txt_ruler")[0];
            if(style["font-weight"]){
                d3.select("#txt_ruler").style("font-weight", style["font-weight"]); 
            }else {
                d3.select("#txt_ruler").style("font-weight", null);
            }
            d3.select("#txt_ruler").style("font-size", style["font-size"]);
            ruler.innerHTML = this;
            return ruler.offsetWidth;
        }
        String.prototype.visualText = function(style, width) {
            var l = this.visualLength(style);
            if(l<=width){
                return this.toString();
            }else {
                var percent = width/l;
                var breakIndex = Math.floor(this.length*percent);
                var tmpStr = this.substring(0, breakIndex+1)+ "&hellip;";
                while(breakIndex>=0 && tmpStr.visualLength(style)>width){
                    breakIndex--;
                    tmpStr = this.substring(0, breakIndex+1)+ "...";
                }
                return tmpStr;
            }
        }

All:

What I want to do is get the characters left if there is a container overflow.

The way I am thinking about(but still not sure how to do that) currently is to use:

#ofc {
    font-size:20px;
    display: inline-block;
    width:200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div id="ofc">A very1 very2 very3 very4 very5 very6 very7 very8 Long TEXT</div>

What shown on the page is: 

A very1 very2 very3 ...

But my current question is:

How can I use jQuery or D3.js or JS to get this crop text with 3 dots, but not the whole?

OR

According to what my purpose, is there a mathematical way to apply specific font-size to it to actually calculate what the text left in a DIV with specific width?

Kuan
  • 11,149
  • 23
  • 93
  • 201
  • Check out http://fittextjs.com/ – soyuka Mar 24 '16 at 16:50
  • @soyuka Thanks, but I guess I did not quite catch u on that site, could u tell me how to use that plugin to achieve my purpose, I did not find how to do this on that site. – Kuan Mar 24 '16 at 16:53
  • It uses a mathematical way to apply font-size according to the container size (javascript) https://github.com/davatron5000/FitText.js/blob/master/jquery.fittext.js#L30. Usage examples are available on the github readme. – soyuka Mar 24 '16 at 16:55
  • @soyuka Thanks, I guess my purpose is not dynamically decide the font size to fit the container, what I want is to use specific font size on a given text string in a DIV container with given width, and get the text which is visually shown – Kuan Mar 24 '16 at 17:00
  • Hacky imo, this piece of code might give you a place to start, good luck. – soyuka Mar 24 '16 at 17:01
  • @Kuan when you say > to get this crop text with 3 dots, but not the whole. You want the portion to the left of the ellipsis (...) or to the right of the ellipsis? Nevermind, I see that you want to measure the left side, ok... – zer00ne Mar 24 '16 at 17:01
  • @zer00ne What I want is `A very1 very2 very3 ...` 3 dots included – Kuan Mar 24 '16 at 17:04
  • @soyuka Thanks, I will give a try. – Kuan Mar 24 '16 at 20:48
  • Editing your solution into the question makes it really hard to understand what the actual problem is/was. Please rollback the edit and post it as an answer instead. – altocumulus Mar 24 '16 at 23:39
  • @altocumulus Thanks, but that part is not an answer, it is part of my question, like I said there, it works most time, but not always, I am still looking for answer – Kuan Mar 24 '16 at 23:43
  • @Kuan Still, it is a solution, if only partially functional. This should be an answer, you may improve later on. – altocumulus Mar 24 '16 at 23:51
  • @Kuan Have you seen this [answer](http://stackoverflow.com/a/5047712/4235784)? Many answers to that question mention `white-space: nowrap;` for strings exceeding the browser width. Maybe, that's causing your problem. – altocumulus Mar 24 '16 at 23:55
  • @altocumulus Thanks, could be. I will test that, cos my string is usually short, that could be one reason, I also think if it is because previous string width affect next string measurement. – Kuan Mar 25 '16 at 00:20

0 Answers0