1

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

但是，当浏览器缩小时，DIV 会缩小，并且我的一些文本会超出 DIV。

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

谢谢

4

5 回答 5

6

你试过css吗？

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

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

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

警告：后一个想法只是从我病态的头脑中冒出来的，我没有实施这样的计划。

于 2013-08-02T17:16:37.063 回答
1

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

代码

。文本 {

溢出：隐藏；

文本溢出：省略号；

显示：-webkit-box；

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

-webkit-box-orient：垂直；

}

于 2013-11-14T10:12:35.907 回答
0

您可以使用 text-overflow 属性直接使用 css3 修复此问题。

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

于 2013-08-02T17:14:32.930 回答
0

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

于 2013-08-02T17:28:00.257 回答
0

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

如果您不介意单词会在中间被截断，并且省略号将始终出现在内部 div 的右下角，那么网络上还有另一个纯 CSS 解决方案，但您需要为此谷歌，在这里重新发布很长。

于 2013-08-02T18:01:35.517 回答