angular.js <span>{{text}}</span> text 变量长度为24 溢出隐藏，鼠标悬浮 出现悬浮框

要实现鼠标悬浮出现悬浮框的效果，您可以使用 CSS 中的 `:hover` 伪类来实现。

具体实现方法如下：

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

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

3. 接着，在 `span` 标签中添加一个 `title` 属性，将其设置为 `{{text}}`，这样当鼠标悬停在文本上时，就会显示文本的完整内容。

4. 最后，使用 `:hover` 伪类选择器，将 `overflow` 属性设置为 `visible`，这样当鼠标悬停在文本上时，就会显示完整的文本内容。

具体的 CSS 代码如下：

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

span:hover {
  overflow: visible;
}

这样就可以实现您的需求了。当鼠标悬停在文本上时，就会显示完整的文本内容。