我想知道一个具有特定宽度和高度的普通HTML元素如何处理JavaScript中的字符:
<div id="text-habdler-with-width-and-height" ></div> <script> $("element").getMaxChar() </script>
pn9klfpd1#
不幸的是,在JavaScript或jQuery中没有内置方法来获取可以容纳到具有特定宽度和高度的HTML元素中的最大字符数。但是,您可以使用JavaScript计算此值。
<div id="text-handler-with-width-and-height" style="width: 200px; height: 100px; font-size: 16px; line-height: 1.2;"></div> <script> function getMaxChar() { var element = document.getElementById('text-handler-with-width-and-height'); var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; var dummy = document.createElement('div'); dummy.style.display = 'inline-block'; dummy.style.font = window.getComputedStyle(element).font; dummy.style.lineHeight = window.getComputedStyle(element).lineHeight; dummy.style.visibility = 'hidden'; dummy.textContent = text; document.body.appendChild(dummy); var charWidth = dummy.offsetWidth / text.length; var maxCharsPerLine = Math.floor(element.offsetWidth / charWidth); var lineHeight = dummy.offsetHeight; var maxLines = Math.floor(element.offsetHeight / lineHeight); document.body.removeChild(dummy); return maxCharsPerLine * maxLines; } console.log(getMaxChar()); // output: 133 </script>
1条答案
按热度按时间pn9klfpd1#
不幸的是,在JavaScript或jQuery中没有内置方法来获取可以容纳到具有特定宽度和高度的HTML元素中的最大字符数。但是,您可以使用JavaScript计算此值。