在开发小程序的过程中，我们经常会遇到一个需求，即当文字超出范围后自动省略不显示。那么该如何设置呢？下面我将分享一些方法给大家，供大家参考学习。

使用CSS设置单行省略效果

首先，打开开发工具，新建一个页面并创建两段文字（这里是为了方便演示，请忽略）。

接下来，在CSS文件中添加以下代码实现单行省略效果：

```css

.demo1{

display:block;

width:100%;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

```

这样，当文字超出容器的宽度时，就会自动省略显示。

使用CSS设置多行省略效果

如果要实现多行省略效果，可以通过以下代码设置：

```css

.demo2{

width:100%;

display:-webkit-box;

word-break:break-all;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

text-overflow:ellipsis;

}

```

以上代码中，-webkit-box属性用于指定显示的行数（这里设置为2行），-webkit-line-clamp属性用于限制显示的行数，超过指定行数的部分会被自动省略。

最后，我们来看看整体效果吧！