Ember 2:截断文本并添加省略号

时间:2015-12-09 21:21:33

标签: ember.js ember-cli

我正在为长字符串寻找一个简单的插件或帮助器,它会截断并添加省略号。我找到了一些带把手助手的例子,但我认为大多数已经过时了。我创建了一个名为truncate-text的ember帮助程序,并尝试拼凑示例,但不成功。此外,如果有一种方法来定义每个用例的字符数限制,那将是一个奖励。

这是我在helpers / truncate-text.js中的内容 从' ember';

导入Ember
export function truncateText(text) {
  if (text.length > 60) {
    var theString = text.substring(0, 60) + " ... ";
    return new Ember.Handlebars.SafeString(theString);
  } else {
    return text;
  }
}

export default Ember.Helper.helper(truncateText);

在我的template.hbs中 {{truncate-text text="Long text here."}

如果我能做到这一点,将不胜感激 {{truncate-text text="Long text here." limit=65}}

2 个答案:

答案 0 :(得分:11)

以下是根据您指定的限制截断文本的帮助程序示例:

function truncateText(params, hash) {
  const [ value ] = params;
  const { limit } = hash;
  let text = '';

  if (value != null && value.length > 0) {
    text = value.substr(0, limit);

    if (value.length > limit) {
      text += '...';
    }
  }

  return text;
}

export default Ember.Helper.helper(truncateText);

然后你会在模板中使用它,如下所示

{{truncate-text "Lorem ipsum dolor long text" limit=5}}

您可以在此处查看演示https://ember-twiddle.com/fcb02795216a206b64dc

答案 1 :(得分:1)

通常你不需要javascript,你可以用css代替

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
  background: green;
  white-space: pre;
}

JSbin