CSS 文字超出省略

white-space 属性

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow 属性

clip 默认。空白会被浏览器忽略。

pre 剪切文本。

ellipsis显示省略符号 … 来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

initial 设置为属性默认值。

inherit从父元素继承该属性值。

注意
实现多行文本溢出显示关键
1、-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

常用案例

// An highlighted block
<template>
  <view class="test-box">
    	<!-- 一行显示不换行 -->
		<view class="text" style="color: red;">
			越来越觉得，一个人走很长的路，靠的是更加“底层”的素质:非常积极的情绪力量、感受到美和享受的能力、理性的思维能力、开放的心态，还有一些性格上更柔韧的地方。</view>
		<!-- 一行显示超出省略 -->
		<view class="text1" style="color: green;">
			越来越觉得，一个人走很长的路，靠的是更加“底层”的素质:非常积极的情绪力量、感受到美和享受的能力、理性的思维能力、开放的心态，还有一些性格上更柔韧的地方。</view>
		<!-- 多行超出省略 -->
		<view class="text2" style="color: blue;">
			越来越觉得，一个人走很长的路，靠的是更加“底层”的素质:非常积极的情绪力量、感受到美和享受的能力、理性的思维能力、开放的心态，还有一些性格上更柔韧的地方。</view>

		</view>
</template>
<style>
		.test-box{
		    width: 200px;
		    height: 200px;
		   border: solid 1px red;
		 }
      //不换行一行显示
		.text {
			white-space: nowrap;/*规定段落中的文本不进行换行 */
		}
       //超出一行省略
		.text1 {
			overflow: hidden;/*超出部分隐藏*/
			text-overflow: ellipsis;/* 超出部分显示省略号 */
			white-space: nowrap;/*规定段落中的文本不进行换行 */
			
		}
         //多行超出省略
		.text2 {
			 display: -webkit-box;	//特别显示模式，将对象作为弹性伸缩盒子模型显示 
			-webkit-box-orient: vertical; 	//盒子中内容竖直排列
			-webkit-line-clamp: 2;//这里是文字超出几行省略
			overflow: hidden;/*超出部分隐藏*/
			text-overflow: ellipsis; //文本溢出部分用省略号表示
		}

</style>