【问题标题】:Work out how many characters can fit into DIV with JavaScript用 JavaScript 计算出有多少个字符可以放入 DIV
【发布时间】:2011-03-25 03:28:52
【问题描述】:

有谁知道使用 JavaScript 计算 HTML 中的 DIV 块中可以容纳多少个字符的最佳方法是什么?

任何建议都会有很大帮助。

【问题讨论】:

  • div 有预定义的宽度吗?
  • 你想限制数量吗?进入 DIV 的字符数,或者如果内容超出 DIV 可以接受的范围,您想检查并向用户标记消息?
  • 如果您尝试将字符串截断以适应 div,您应该寻找更好的替代方案 - 例如受支持的 CSS3 属性 text-overflow在 IE6+ 和大多数现代浏览器中。见my answer to Append "..." when a string is larger than desired for more information

标签: javascript html character


【解决方案1】:

您可以迭代地将字符添加到隐藏的 div 并检查其宽度。不知道有没有更好的办法。

编辑:像这样:

var targetWidth = document.getElementById('DivToCheck').clientWidth;
var stringToFit = 'abcdefghijk';
var numChars = 0;
for(var i=0; i < stringToFit.length; i++)
{
   document.getElementById('hiddenDiv').innerHTML += stringToFit.charAt(i);
   if (document.getElementById('hiddenDiv').clientWidth > targetWidth)
   {
       numChars = i - 1;
       break;
   }
}

<div id="hiddenDiv" style="visibility: hidden; width: auto;"></div>

【讨论】:

  • 记住以下几点:1.隐藏的div会影响页面的布局,所以应该有position:absolute;,2.隐藏的div会需要匹配要检查的 div 的字体样式(例如 font-familyfont-sizefont-weight 等)。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-11-03
  • 2013-11-01
  • 1970-01-01
  • 2010-11-13
  • 2016-11-22
相关资源
最近更新 更多