计算DIV中可容纳的字符数

count how many characters fit in a DIV

本文关键字：字符 可容纳 DIV 计算      更新时间：2023-09-26

我的页面上有一个div（这是一个响应式设计），它只包含设置pt大小的文本。文本很合适，页面看起来很大气。

然而，当浏览器缩小时，DIV会缩小，我的一些文本会从DIV中弹出

有没有某种JavaScript（jQuery）公式可以计算DIV中可以容纳多少个字符？我的想法是，每次浏览器更改大小时，文本都会被截断，并在末尾添加省略号。我只是不知道在哪里截断它。

感谢

你尝试过css吗？

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

计算字符的空间需求将产生一个庞大的原始数据表。用户代理、字体系列/大小/重量/种类和符号是需要考虑的维度。

我认为从实时上下文中收集数据并不容易，尽管嵌入一个svg元素和一个包含html数据的foreignObject节点可能是一个可行的路径：文本可以复制到foreignObject元素中，并使用getBBox方法来提供所要求的空间。

警告：后一个想法是从我病态的头脑中产生的，我还没有实施这样的计划。

它将有助于显示要显示的段落行数。

代码

.text｛

溢出：隐藏；

文本溢出：省略号；

显示：-webkit框；

-webkit线夹：2；/*要显示的行数*/

-webkit长方体方向：垂直；

}

这取决于您是否需要能够支持div中的多行，是否需要在末尾使用省略号（或其他东西），以及是否需要打断单词bounddry。

对于单线解决方案，以及如果您不想要省略号的多线解决方案：

.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，获取文本并将其附加到其父级（.interner），然后删除所有额外的类。然后遍历所有外部类，并将其高度与包含内部类的高度进行比较。如果内部div大于外部div，则需要应用省略号。将省略号代码附加到内部div，如$('.inner').append('<span class="ellipsis">...</span><span class="extra"><span>')。然后进入循环，直到内部div等于或小于外部div的高度，执行以下操作：删除.ellipsis之前内部div中的最后一个（字符|单词），并将其预附加到.extra跨度。

网络上还有另一个仅支持CSS的解决方案，如果你不介意单词会在中间被截断，省略号总是出现在内部div的右下角，但你需要在谷歌上搜索，在这里转发会很长时间。

您可以通过使用文本溢出属性，使用直接css3来修复此问题。

听起来您想要的是text-overflow: ellipsis;

如果您需要支持不能处理text-overflow: ellipsis的旧浏览器，那么我建议您使用这样的插件。

相关文章：