在開發(fā)小程序的過程中，我們經(jīng)常會(huì)遇到一個(gè)需求，即當(dāng)文字超出范圍后自動(dòng)省略不顯示。那么該如何設(shè)置呢？下面我將分享一些方法給大家，供大家參考學(xué)習(xí)。使用CSS設(shè)置單行省略效果首先，打開開發(fā)工具，新建一個(gè)頁面

在開發(fā)小程序的過程中，我們經(jīng)常會(huì)遇到一個(gè)需求，即當(dāng)文字超出范圍后自動(dòng)省略不顯示。那么該如何設(shè)置呢？下面我將分享一些方法給大家，供大家參考學(xué)習(xí)。

使用CSS設(shè)置單行省略效果

首先，打開開發(fā)工具，新建一個(gè)頁面并創(chuàng)建兩段文字（這里是為了方便演示，請(qǐng)忽略）。

接下來，在CSS文件中添加以下代碼實(shí)現(xiàn)單行省略效果：

```css

.demo1 {

display: block;

width: 100%;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

```

這樣，當(dāng)文字超出容器的寬度時(shí)，就會(huì)自動(dòng)省略顯示。

使用CSS設(shè)置多行省略效果

如果要實(shí)現(xiàn)多行省略效果，可以通過以下代碼設(shè)置：

```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屬性用于指定顯示的行數(shù)（這里設(shè)置為2行），-webkit-line-clamp屬性用于限制顯示的行數(shù)，超過指定行數(shù)的部分會(huì)被自動(dòng)省略。

最后，我們來看看整體效果吧！