html画布文本溢出省略号

时间:2012-05-09 02:11:21

标签: canvas html5-canvas

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

4 个答案:

答案 0 :(得分:17)

没有标准功能。

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

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);

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

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

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;
};
相关问题