限制文本显示的行数

例如限制文本只显示两行，超出部分用省略号...表示

<view class="text-container">
  这是一段很长的文本，希望在两行内显示，并且超出部分用省略号表示。
</view>

// 文本多余两行后显示省略号
.text-container {
overflow: hidden;      	          // 溢出内容隐藏
text-overflow: ellipsis;         // 文本溢出部分用省略号表示
display: -webkit-box;	        // 特别显示模式
-webkit-line-clamp: 2;	        // 显示的行数 
-webkit-box-orient: vertical;  // 盒子中内容竖直排列
}

-webkit-line-clamp: 2;来指定文本显示的行数为2行。当文本超出2行时，超出部分会被省略号表示。

需注意的是：-webkit-line-clamp属性只在WebKit浏览器中有效，其他浏览器可能不支持。

第二种：

.text2{
		        overflow:hidden; 
		        text-overflow:ellipsis;
		        display:-webkit-box;
		        -webkit-box-orient:vertical;
		        autoprefixer: off;
		        autoprefixer: on;
		        -webkit-line-clamp:1; 
		        word-wrap: break-word;
		        word-break: break-all;
	}

css代码解释：

1. `overflow: hidden;`
   - 这个属性规定当内容溢出容器尺寸时，要将溢出部分隐藏起来，不显示在视图中。

2. `text-overflow: ellipsis;`
   - 当文本溢出容器时，显示省略号 (...) 来指示被修剪的文本。

3. `display: -webkit-box;`
   - 使用 Flexbox 布局模型，此处 `-webkit-box` 是旧版本的 Flexbox 语法，用于多行文本的处理。

4. `-webkit-box-orient: vertical;`
   - 设置 Flexbox 容器的主轴方向为垂直方向，这样文本将按垂直方向排列。

5. `-webkit-line-clamp: 1;`
   - 这个属性规定显示的文本行数。在这里，设置为 `1` 表示只显示一行文本，超出的部分将被裁剪并显示省略号。

6. `word-wrap: break-word;`
   - 这个属性用于在长单词或 URL 地址中强制换行，防止内容溢出容器。

7. `word-break: break-all;`
   - 当一个单词太长以至于无法容纳在一行时，此属性强制单词内部的字母和单词内部的空白被视为断开点，允许内容在字母之间断行。

综合起来，这段 CSS 的作用是将文本内容限制在一个垂直方向的 Flexbox 容器中，最多显示一行文本，超出部分被隐藏并显示省略号。同时，它还处理了长单词或 URL 的换行问题，确保文本在需要时能够进行断行，而不会破坏布局或溢出容器。