已知html当中width 宽度和字体大小font-size ，如何计算一行大致能放几个字？

Question

                <td style="width:100pt;border-top-style:solid;border-top-width:1pt;border-left-style:solid;border-left-width:1pt;border-bottom-style:solid;border-bottom-width:1pt;border-right-style:solid;border-right-width:1pt" colspan="3">
                    <p class="font-size:11pt" style="padding-left: 84pt;text-indent: 0pt;line-height: 13pt;text-align: right;">
                        123
                    </p>
                </td>

比如这个td是100，fontsize是11

嗯就是一个报表的一个td里面要手动去\n 换行 然后想算一下大概多少个字换行，但是如果只是100\11只有10个实际上是可以放24个左右，所以不太确定宽度和字体大小之间有没有关联

Answer 1

首先一个哈，你只需要确定 <td> 的宽度就行了，不需要去关心多少个字换行，浏览器会给自己你换行的，要是你还想做超出 n 行后省略文本，那么可以看看我之前的这篇笔记 👉 CSS 中的文字截断，也可以自己大概提前数一下最少情况下多少字换行，然后截断文本。

如果你只是想知道一个字有多宽的话，那么可以告诉你的是 不同字体的字宽是不同的，同样字体不同文字的字宽也有可能不同。

确定字体 font-family 与 font-size 的文字可以自己写个单文字的demo，并在盒模型中查看单个文字的宽度高度。
如果不确定的话，那么就没办法了，可以用 canvas 实现获取单字宽高但没必要。

一些参考文章

• Font-size: An Unexpectedly Complex CSS Property - In Pursuit of Laziness
• 深入了解CSS字体度量，行高和vertical-align_CSS, line-height 教程_W3cplus

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

估计需求是要动态计算文字能占用的行数吧，可能用再canvas上？

常规算法是除法取整，即parseInt(100/11)。

不过得看字体等因素的，也会存在小部分误差。

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

中文和英文还是不一样的，vue el-table里面td是自动换行的，可以看下的他实现原理.

如果文字太多放不下，可以...省略

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 4

可以利用canvas的mesureText对每行能容纳的字数进行动态测量

/**
 * 更具容器宽度算出一行所能容纳的最大字数
 * @param containerWidth 容器宽度
 * @param char 用测算的字符
 * @param font 字体
 */
const charCountFitInWith = (
  containerWidth: number,
  char: string = "国",
  font: string = "11px Microsoft YaHei"
) => {
  let left = 1;
  /**
   * 一行可容纳的最大字符数量，可根据业务进行调整，以减小迭代次数
   */
  let right = 2 ** 16;
  const canvasEle = document.createElement("canvas");
  const context = canvasEle.getContext("2d");
  context.font = font;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);

    const str = char.repeat(mid);
    const { width } = context.measureText(str);

    if (width >= containerWidth) {
      right = mid - 1;
    } else {
      left = mid + 1;
    }
  }

  return left;
};

console.log(charCountFitInWith(112, "国")); //11
console.log(charCountFitInWith(10000, "赢")); //910
console.log(charCountFitInWith(10000, "a")); //1645