span超出指定长度变成省略号

当文本内容超过指定长度时，为了美观和节省空间，我们可以使用CSS中的text-overflow属性来实现文本的省略显示，常用的方式是使用span标签包裹需要显示的文本，并设置该span元素的样式。

在CSS中，可以通过设置text-overflow为ellipsis来实现文本的省略显示。当文本内容超过容器宽度时，超出部分将会被省略，并以省略号（...）表示。

具体实现的步骤如下：
1. 使用span标签包裹需要进行省略显示的文本内容。
2. 在span元素的样式中设置overflow属性为hidden，这样超出容器宽度的内容将会被隐藏起来。
3. 设置white-space属性为nowrap，使得文本内容在一行内显示，不会换行。
4. 设置text-overflow属性为ellipsis，表示超出部分显示省略号。

样式示例：

<style>
    span {
        display: inline-block;
        width: 200px; /* 设置容器宽度 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

HTML代码示例：

<span>这是一段超出容器宽度的文本内容，当超过指定长度时将以省略号显示。</span>

通过以上的CSS样式和HTML代码的设置，我们可以实现当文本超出指定长度时，使用span标签将文本内容包裹并进行省略显示。