Question

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

但是，当浏览器缩小尺寸时，DIV会缩小，而且我的一些文字会从DIV中消失。

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

由于

Answer 1

你试过css吗？

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

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

我认为从实时上下文中收集数据并不容易，尽管将svg元素与包含html数据的foreignObject节点嵌入可能是一条可行路径：文本可以复制到foreignObject元素和getBBox method用于提供所声称的空间。

警告：后一种想法刚刚从我生病的心灵中产生，我没有实施这样的计划。

Answer 2

这取决于你是否需要能够在你的div中支持多行，并且如果你需要在末尾有一个省略号（或其他东西），并且如果你需要打破一个单词边界与否。

对于单行解决方案和多行解决方案，如果您不需要省略号：

.resizable {
    overflow-x: hidden;
}

对于带省略号的单行解决方案：

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

对于最后有（某些）的多行解决方案，我不会发布代码，但逻辑是这样的：你将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的高度执行以下操作：在.ellipsis之前删除内部div中的last（character | word）并将其预先添加到{{ 1}} span。

网上还有另一个仅限CSS的解决方案如果您不介意在中间切换单词，省略号将始终显示在内部div的右下角，但是您我需要谷歌，这很长时间才能重新发布。

Answer 3

您可以使用text-overflow属性通过直接css3解决此问题。

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

Answer 4

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

Answer 5

这将有助于显示否。要显示的段落行。

代码

.text {

溢出：隐藏;

text-overflow：省略号;

显示：-webkit-box;

-webkit-line-clamp：2; / *要显示的行数* /

-webkit-box-orient：vertical;

}

计算DIV中适合的字符数

5 个答案: