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

wanwanwan
  • 193
                <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个左右,所以不太确定宽度和字体大小之间有没有关联

回复
阅读 534
4 个回答

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

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

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

一些参考文章


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

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

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

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


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

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

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

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

可以利用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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏