我的页面上有一个 DIV（这是一种响应式设计），其中仅包含设置 pt 大小的文本。文字很合适，页面看起来很棒。
但是，当浏览器缩小时，DIV 会缩小，并且我的一些文本会超出 DIV。
是否有某种 JavaScript (jQuery) 公式可以计算出一个 DIV 中可以容纳多少个字符？我的想法是每次浏览器更改大小时，文本都会被截断，最后会添加省略号。我只是不知道在哪里截断它。
谢谢
【问题讨论】：
标签： javascript jquery truncate
你试过 css 吗？
div.resizable {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
计算字符的空间需求将产生一个庞大的原始数据表。用户代理、字体系列/大小/重量/品种和符号是需要考虑的维度。
我认为从实时上下文中收集数据并不容易，尽管嵌入一个带有包含 html 数据的 foreignObject 节点的 svg 元素可能是一条可行的路径：文本可以复制到 foreignObject 元素和getBBox method 用于提供所声称的空间。
警告： 后一个想法只是从我病态的头脑中冒出来的，我没有实施这样的计划。
【讨论】：
这将有助于显示否。您要显示的段落行数。
代码
.text {
溢出：隐藏；
文本溢出：省略号；
显示：-webkit-box;
-webkit-line-clamp: 2; /* 要显示的行数 */
-webkit-box-orient: 垂直；
}
【讨论】：
这取决于您是否需要能够在 div 中支持多行，是否需要在末尾添加省略号（或其他内容），以及是否需要打破单词边界。
对于单行解决方案和多行解决方案（如果您不想要省略号）：
.resizable {
overflow-x: hidden;
}
对于带省略号的单行解决方案：
.resizable {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
对于末尾带有 (something) 的多行解决方案，我不打算发布代码，但逻辑是这样的：您将 div 包装在另一个 div 中（称它们为内部和外部）。使用以下 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 的高度，执行以下操作：删除内部 div 中 .ellipsis 之前的最后一个（字符|单词）并将其预先附加到 .extra 跨度.
如果您不介意单词会在中间被截断，并且省略号将始终出现在内部 div 的右下角，那么网络上还有另一种纯 CSS 解决方案，但是您需要google一下，这里转帖太长了。
【讨论】：
您可以通过使用 text-overflow 属性直接使用 css3 来解决此问题。
听起来你想要的是text-overflow: ellipsis;
【讨论】：
overflow: hidden 或不阻止white-space: nowrap 的换行符，单独的文本溢出将无法工作
如果您需要支持无法处理 text-overflow: ellipsis 的旧版浏览器，那么我建议您使用类似 this one 的插件。
【讨论】：
text-overflow。 IE 早在 IE5.5 就支持它。 Webkit 浏览器从第一个版本开始就支持它。 Firefox 从 v7 开始支持它（FF3 有一个 CSS 解决方法）。因此，除非您需要支持 Firefox 4-7，否则不需要任何类型的插件。即使这样，您也可以让溢出截断没有省略号的文本。