在Vue.js中如何限制文本最多显示指定长度的字符

你可以直接在双大括号模板内调用JS字符串的slice()方法实现指定长度截取，示例写法如下：

<label>{{ text.slice(0,5) }}</label> <!-- 仅显示前5个字符 -->

如果需要在文本超出指定长度时自动追加省略号，优化展示效果，可以改成下面的写法：

<label>{{ text.length > 5 ? text.slice(0,5) + '...' : text }}</label>

相关说明 #

• slice(startIndex, endIndex) 是JS原生字符串方法，截取范围是左闭右开区间，slice(0,5) 会截取索引0到4的字符，正好匹配你需要的前5个字符要求。
• 上述三元判断逻辑兼容短文本场景：如果原本的文本长度不足5，就直接展示完整内容，不会出现截取异常。
• 如果有多处需要用到文本截断能力，你可以把这个逻辑封装成全局过滤器或者自定义指令，方便复用。

内容的提问来源于stack exchange，提问作者JohnW2Smith