count how many characters fit in a DIV

问题

I have a DIV on my page (which is a responsive design), which contains just text of a set pt size. The text fits fine and the page looks grand.

However, when the browser is reduced in size, the DIV shrinks, and some of my text busts out of the DIV.

Is there some kind of JavaScript (jQuery) formula for working out how many characters can fit in a DIV? The idea I have is every time the browser changes size, the text is truncated, and ellipses are added at the end. I just don't know where to truncate it.

Thanks

回答1:

That depends on if you need to be able to support multiple lines in your div, and if you need to have an ellipsis (or other thing) at the end, AND if you need to break on a word boundry or not.

For single line solutions, and multiple line solutions if you don't want an ellipsis:

.resizable {
    overflow-x: hidden;
}

For single line solutions with an ellipsis:

.resizable {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

For multiple line solutions with (something) at the end, I'm not going to post the code, but the logic goes something like this: You wrap your div in another div (call them inner and outer). Use the following CSS:

.outer{overflow:hidden;}
.inner{width:100%;}
.extra{display:none;}

Then catch the browser resize event, and then remove everything with the ellipsis class $('.ellipsis').remove(); from the page, and for each .extra, take the text and append it to it's parent (.inner), and then remove all the extra classes. Then iterate through all the outer classes, and compare it's height to the height if the contained inner class. If the inner div is larger than the outer div, then you need to apply an ellipsis. Append your ellipsis code to the inner div, like $('.inner').append('<span class="ellipsis">...</span><span class="extra"><span>'). Then go into a loop until the inner div and equal or less than the height of the outer div doing the following: remove last (character|word) in the inner div just prior to the .ellipsis and preappend it to .extra span.

There is another CSS-only solution as well out there on the web IF you don't mind that words can get cut off in the middle, and the ellipsis will always appear at the bottom right of the inner div, but you'll need to google for that, it's much to long to repost here.

回答2:

have you tried css ?

div.resizable {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

computing the space requirement of character will produce a vast table of raw data. user agent, font family/size/weight/variety and symbol are dimensions to take account for.

i don't think it will be easily possible to gather the data from the live context though embedding a svg element with a foreignObject node containing html data might be a feasible path: text could be copied into the foreignObject element and the getBBox method be employed to provide the space claimed.

caveat: the latter idea just sprang from my sick mind, i've not implemented such a scheme.

回答3:

You can fix this with straight css3, by using the text-overflow property.

It sounds like what you want is text-overflow: ellipsis;

回答4:

If you need to support older browsers that can't handle text-overflow: ellipsis then I would suggest a plugin like this one.

回答5:

It will help in showing the no. of lines of paragraph you want to show.

Code

.text {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; /* number of lines to show */

-webkit-box-orient: vertical;

}

来源：https://stackoverflow.com/questions/18022557/count-how-many-characters-fit-in-a-div

标签

javascript

jquery

truncate