计算一个 DIV 中有多少个字符 [英] count how many characters fit in a DIV

问题描述

我的页面上有一个 DIV(这是一种响应式设计)，其中仅包含设置 pt 大小的文本.文字很合适，页面看起来很宏伟.

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.

但是，当浏览器缩小时，DIV 会缩小，并且我的一些文本会从 DIV 中消失.

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

是否有某种 JavaScript (jQuery) 公式可以计算出一个 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.

谢谢

推荐答案

这取决于你是否需要能够在你的 div 中支持多行，以及你是否需要在末尾有一个省略号(或其他东西), 以及是否需要打破单词边界.

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

对于结尾带有(某物)的多行解决方案，我不打算发布代码，但逻辑是这样的:您将 div 包装在另一个 div 中(称为内部和外部).使用以下 CSS:

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

然后捕获浏览器调整大小事件，然后从页面中删除带有省略号类 $('.ellipsis').remove(); 的所有内容，并为每个 .extra，获取文本并将其附加到它的父级 (.inner)，然后删除所有额外的类.然后遍历所有外部类，并将其高度与包含的内部类的高度进行比较.如果内部 div 大于外部 div，则需要应用省略号.将省略号代码附加到内部 div，如 $('.inner').append('<span class="ellipsis">...</span><span class="extra"><span>').然后进入一个循环，直到内部 div 等于或小于外部 div 的高度，执行以下操作:删除 .ellipsis 之前的内部 div 中的最后一个(字符|字)并预先附加它到 .extra 跨度.

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.

如果您不介意单词可以在中间被截断，并且省略号将始终出现在内部 div 的右下角，那么网络上还有另一种仅使用 CSS 的解决方案，但是您需要在谷歌上搜索，在这里重新发布太长了.

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.

这篇关于计算一个 DIV 中有多少个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！