jQuery - 如何获得最大字符可以适合给定的宽度？

Question

我需要将长字符串转换为数组，因为我想使用这个插件：http://richhollis.github.io/vticker/。我为此目的做了一个简单的功能，但是当我试图获得最大字符时，它显示的值与实际结果不同。这是我的代码：

$paHeader = $('.pa-header');

let $b       = $paHeader.find('b').text();
let bLength  = $b.length; //295 characters
let bTLength = bLength * 14; // 295 * 14px (fontsize) = 4130px

let container     = Math.floor($(window).width() - 14); //1889 - 14 = 1875 just for safety
let maxFontPerRow = Math.floor(container / 14); //134 characters

实际可以显示的字符数大致为261而不是134.以下是我浏览器的信息：

http://whatsmy.browsersize.com/

Browser window width: 1920
Browser window height:  950
Screen width: 1920
Screen height:  1080
Screen color depth: 24

CSS

.pa-header {
  background-color: #F58334;
  text-align: center;
  max-height: 44px;
  overflow-wrap: break-word;
  overflow-y: scroll;
}

如何正确执行此操作？谢谢你的帮助。

Answer 1

如果CSS不影响document的渲染，您可以使用window.innerWidth来获取视口的宽度，或Element.getBoundingClientRect().width来获取元素的宽度，例如{ {1}}。