统计DIV中有多少个字符

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

但是，当浏览器的尺寸缩小时，DIV会缩小，而我的一些文本会从DIV中删除。

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

感谢

来源

2013-08-02 Typhoon101

你用多行或单行文本的工作？下面的答案适用于单个，但不是多个。 – jterry

我正在处理多行文本 – Typhoon101

这取决于您是否需要能够支持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>')。然后进入循环，直到inner div等于或小于外部div的高度，执行以下操作：删除.ellipsis之前的内部div中的最后一个（字符），并将其前置到.extra范围内。

还有另外一个CSS的解决方案，以及在网络上如果你不介意单词可以在中间切断，省略号将始终出现在内部div的右下角，但你需要谷歌，这是很长的重新发布在这里。

来源

2013-08-02 18:01:35

可以直CSS3解决这个问题，通过使用文本overflow属性。

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

来源

2013-08-02 17:14:32

没有'overflow：hidden'或者没有阻止通过'white-space：nowrap'的换行符，文本溢出本身就无法工作 – UweB

对于多行，除了较老的（pre-Webkit）Opera浏览器。 –

谢谢。我不知道文本溢出属性。不过，我想要文字换行。 div的高度是固定的，但宽度是可变的。我需要尽可能多地显示文本，如果需要的话可以进行包装，但是如果文本到达DIV文本太多的地方，则会显示省略号。这可以做到吗？ – Typhoon101

你尝试过CSS？

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

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

我不认为这将是容易实现，虽然嵌入SVG元素包含HTML数据可能是一个可行的路径foreignObject节点从现场情况下收集数据：文本可以被复制到foreignObject元素和应用getBBox method来提供所要求的空间。

警告：后一种想法刚刚从我的病态头脑中跳出来，我还没有实施过这样的计划。

来源

2013-08-02 17:16:37 collapsar

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

来源

2013-08-02 17:28:00 gms

很少有不支持“文本溢出”的浏览器。 IE支持它早在IE5.5。 Webkit浏览器自第一版以来一直支持它。 Firefox自v7以来一直支持它（并且FF3有一个CSS解决方法）。因此，除非需要支持Firefox 4-7，否则不需要任何形式的插件。即使这样，你也可以让溢出截断文本而不用省略号。 – Spudley

非常真实。插件肯定是最后的选择。 – gms

这将有助于显示没有。你想要展示的段落的线条。

代码

的.text {

溢出：隐藏;

text-overflow：ellipsis;

display：-webkit-box;

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

-webkit-box-orient：vertical;

}

来源

2013-11-14 10:12:35 ParaMeterz

演示... http://jsfiddle.net/csYjC/669/ – ParaMeterz

统计DIV中有多少个字符

回答

相关问题