在网页设计中，常常出现一种情况，就是一个块级元素的内容超出了其被分配的宽度。一般来说，我们会采用省略号来替代溢出的内容，从而让元素的视觉效果更美观，同时也防止出现滚动条干扰用户体验。

要实现这个效果，需要使用CSS的text-overflow属性。text-overflow属性是CSS3中新增的一个属性，它主要有以下两个取值。

text-overflow: clip;    /* 当文字溢出容器时，裁剪溢出部分 */
text-overflow: ellipsis;    /* 当溢出文字时，用省略号“…”代替 */

其中，我们比较常用的是第二个取值，也就是使用省略号来代替溢出的内容。

使用text-overflow属性时，还需要结合white-space和overflow属性使用。其中，white-space用于定义如何处理元素内的空白符，而overflow用于定义元素内容超出容器时的处理方式。这两个属性对于text-overflow属性的效果也有影响。

white-space: nowrap;    /* 禁止元素内自动换行 */
overflow: hidden;    /* 隐藏超出范围的内容 */
text-overflow: ellipsis;    /* 使用省略号代替溢出的内容 */

通过以上几个步骤，就可以实现超出宽度自动省略号的效果了。当然，要注意浏览器兼容性的问题，不同浏览器对CSS的实现方式可能会有所不同，需要再实践中不断尝试。