小程序设置文字单行多行超出省略显示

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

使用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属性用于限制显示的行数，超过指定行数的部分会被自动省略。

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

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。