Question

您好我有这样的模板：

<template name="list">
{{# each list}}
    <a class="col-md-4 col-xs-12 col-sm-6 list-item" href="/{{category}}/{{_id}}">
        <div class="list-item-inner">
            <img class="col-md-12 img-responsive" src="#" />
            <div class="col-md-12 list-title">
                {{vTitle}}
            </div>
            <div class="min">
                <span>00:00</span>
            </div>
        </div>
    </a>
{{/each}}
</template>

我如何将{{vTitle}}限制为一定数量的字符，比如10个字符？我要求的东西与Templete无关。*。渲染后再用jquery或其他东西进行编辑。

我认为有什么：{{vTitle.limitCharacters（10）}}或MeteorJs提供的一些方法。

试过这个： {{vTitle.substring（0,10）}}

我不知道火焰是如何起作用的，我只是试一试。

我的解决方案，我添加了一个helper shortTitle，如下例所示，然后使用{{shortTitle}}更改模板中的{{vTitle}}：

Template.list.helpers({
    list : function() {
        return Collection.find();
    },
    shortTitle: function() {
        return this.vTitle.substr(0,15)+'...';
    }
});

特别感谢@David Weldon

Answer 1

我在项目中有几种方法可以做到这一点。选择你自己的冒险：

CSS

您可以使用this trick：

使用纯CSS进行截断

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

只需将truncate类应用于标题，它就会截断父div的宽度。好处是不需要javascript，但缺点是它只适用于现代浏览器，你不能指定精确的字符数。

underscore.string

如果您希望以编写更多帮助程序代码为代价更加精确，则可以使用包含truncate和prune方法的underscore.string库。当你想截断整个单词时，prune特别好。

Template.list.helpers({
  shortTitle: function() {
    return _.str.prune(this.vTitle, 10);
  }
});

如何在MeteorJS中渲染时限制字符串字符

1 个答案:

CSS

underscore.string