Question

我有一个HTML字段，我想确定可以安全地输入到该字段的最大字符数，而不会溢出给定的字体和字体大小。

如果元素使用courier new或其他固定宽度字体且没有换行符，这将是一个微不足道的问题：只需输入文本直到它溢出元素，并计算使用了多少个字符。

使用每个字符间距不同的字体，这变得更加困难。有没有办法安全地计算这个，可能配置一个任意的最大或平均字长，以忽略诸如“Pneumonoultramicroscopicsilicovolcanoconiosis”之类的异常值，这会比正常情况更早地破坏这条线。

假设可能是字体中“最宽”常用字符的宽度和最大字长，以说明换行时丢失的空间。否则，我将提供一个安全缓冲量的粗略估计☺

为了澄清，这不是以编程方式阻止一定长度的输入 - 这些限制将事先明确传达。这是关于确定这个限制是什么，而不是模糊估计它。

Answer 1

在内存中创建Div
通过char
根据字体和文字大小获取文本宽度的计算值。

所以你编辑代码并将其包装在一个循环中：

＆＃13;

var newDiv = document.createElement("span");
newDiv.className ="fontVerdana"
newDiv.style ="display:inline-block;"


newDiv.innerText ="this is a test ";
document.body.appendChild(newDiv);

// returns the width based on the content / 40px Verdana
alert("based on the content / 40px Verdana => "+ window.getComputedStyle(newDiv,null).getPropertyValue("width"));

newDiv.innerText ="this is a test that will show how big this box is";
// returns the width based on the content / 40px Verdana
alert("40px Verdana =>" + window.getComputedStyle(newDiv,null).getPropertyValue("width"));

newDiv.className ="fontSerif"
newDiv.innerText ="this is a test that will show how big this box is";
// returns the width based on the content / 20px Serif
alert("20px Serif => " + window.getComputedStyle(newDiv,null).getPropertyValue("width"));

newDiv.className ="fontMonoSpace"
newDiv.innerText ="this is a test that will show how big this box is";
// returns the width based on the content / 10px Monospace
alert("10px Monospace => " + window.getComputedStyle(newDiv,null).getPropertyValue("width"));

＆＃13;

.fontVerdana
{
  font-family:verdana;
  font-size:40px;
}

.fontSerif
{
  font-family:serif;
  font-size:20px
}

.fontMonoSpace
{
  font-family:monospace;
  font-size:10px;
}

＆＃13;

确定适合HTML元素

1 个答案: