angular.js <span>{{text}}</span> text 变量长度为24 溢出隐藏

您可以使用 CSS 样式中的 `text-overflow` 属性和 `white-space` 属性来完成这个需求。具体实现方法如下：

1. 首先，将 `span` 标签设置为一个固定的宽度，比如`100px`，并设置 `display` 属性为 `inline-block`，这样就可以让它只占用实际需要的宽度。

2. 然后，将 `white-space` 属性设置为 `nowrap`，这样文本就不会自动换行。

3. 最后，将 `text-overflow` 属性设置为 `ellipsis`，这样当文本长度超过标签宽度时，就会自动在末尾显示省略号。

具体的 CSS 代码如下：

span {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样就可以实现您的需求了。