Question

如果文本不符合可用宽度并且需要截断，是否可以在文本末尾带有省略号的画布上绘制文本？感谢。

Answer 1

没有标准功能。

正如我需要的那样，我做了一个小函数来计算最合适的字符串：

function fittingString(c, str, maxWidth) {
    var width = c.measureText(str).width;
    var ellipsis = '…';
    var ellipsisWidth = c.measureText(ellipsis).width;
    if (width<=maxWidth || width<=ellipsisWidth) {
        return str;
    } else {
        var len = str.length;
        while (width>=maxWidth-ellipsisWidth && len-->0) {
            str = str.substring(0, len);
            width = c.measureText(str).width;
        }
        return str+ellipsis;
    }
}

其中c是2D上下文。

您可以在设置画布的字体和其他绘图参数后正常绘制字符串：

c.fillText(fittingString(c, "A big string that will likely be truncated", 100), 50, 50);

Answer 2

对于html5 drawText没有这样的东西，实现起来会有点复杂。您需要循环来修剪字符串，直到符合所需的大小。如果文本没有旋转或有任何其他特殊效果，我建议使用具有绝对位置和以下CSS样式的普通div：

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

Answer 3

有一些与浏览器无关的技术不支持多行文字渲染。

这就是为什么我开发了一个小型库来处理这个问题（等等）。该库提供了对模型化和执行字母级文本呈现的对象。这应该只是你需要的：

在http://www.samuelrossille.com/home/jstext了解详情，了解屏幕截图，教程和下载链接。

Answer 4

在处理大量文本时，投票最高的答案会导致性能问题。

这是使用二进制搜索来加快对字符串正确长度的搜索的改编版本。

const binarySearch = ({ max, getValue, match }) => {
  let min = 0;

  while (min <= max) {
    let guess = Math.floor((min + max) / 2);
    const compareVal = getValue(guess);

    if (compareVal === match) return guess;
    if (compareVal < match) min = guess + 1;
    else max = guess - 1;
  }

  return max;
};

const fitString = (
  ctx,
  str,
  maxWidth,
) => {
  let width = ctx.measureText(str).width;
  const ellipsis = '…';
  const ellipsisWidth = ctx.measureText(ellipsis).width;
  if (width <= maxWidth || width <= ellipsisWidth) {
    return str;
  }

  const index = binarySearch({
    max: str.length,
    getValue: guess => ctx.measureText(str.substring(0, guess)).width,
    match: maxWidth - ellipsisWidth,
  });

  return str.substring(0, index) + ellipsis;
};

html画布文本溢出省略号

4 个答案: