Question

我有适用于桌面和移动设备的自适应应用。

在app中我有一个div，随机显示各种长度的文本。我想做以下事情：

如果换行因为文本的长度对于div的宽度而言太宽，我希望font-size自行缩小（我在我的应用程序中使用了em）。

我需要为它构建指令吗？它是一种被大量建造和使用的东西吗？

Answer 1

为这个问题编写一个强大的解决方案将是非常重要的。据我所知，没有办法判断一行文字是否破裂。但是，我们知道换行的标准是文本的宽度比元素宽，占填充。

Canvas API有一个名为measureText的方法，可以使用给定的字体和大小设置的上下文来测量字符串。如果您使用画布来欺骗元素的设置，那么您可以使用画布测量文本并调整大小直到它适合而不会溢出。

我已经写了一个粗略的实现方式来解决这个问题。

function TextScaler(element) {
  var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d');

  var scaler = {};

  scaler.copyProps = function() {
    var style   = element.style.fontStyle,
        family  = element.style.fontFamily,
        size    = element.style.fontSize,
        weight  = element.style.fontWeight,
        variant = element.style.fontVariant;

    context.font = [style, variant, weight, size, family].join(' ');
  };

  scaler.measure = function(text) {
    text = text || element.innerText;
    return context.measureText(text);
  };

  scaler.overflows = function() {
    var style = window.getComputedStyle(element),
        paddingLeft = style['padding-left'],
        paddingRight = style['padding-right'],
        width = style.width - paddingLeft - paddingRight;

    return scaler.measure() > width;
  };

  scaler.decrease = function() {
    // decrease font size by however much
  };

  scaler.auto = function(retries) {
    retries = retries || 10;

    if(retries <= 0) {
      scaler.apply();
      console.log('used all retries');
    }

    if(scaler.overflows()) {
      scaler.decrease();
      scaler.auto(retries - 1);
    } else {
      console.log('text fits');
      scaler.apply();
    }
  };

  scaler.apply = function() {
    // copy the properties from the context
    // back to the element
  };

  return scaler;
}

在你整理了一些空白的细节后，你就可以使用这样的函数：

var element = document.getElementById('');
var scaler = TextScaler(element);
scaler.auto();

如果它无法在10次重试中减少它，它将停在那里。您也可以手动执行此操作。

while(scaler.overflows()) {
  scaler.decrease();
}
scaler.apply();

你可能想要一些相当精细的调整逻辑来处理减少功能。将ems转换为像素可能是最简单的，然后纯粹用整数工作。

如果要将此API与Angular一起使用，则可以将此API简单地包装为指令。我可能会用两个属性指令解决这个问题。

<div text-scale retries="10">Hello world</div>

当然，如果屏幕上显示所有文字并不重要，那么您可以使用text-overflow: ellipsis CSS属性。

换行时减少angularjs中文本的大小？

1 个答案: