前端-对象内文本溢出时显示省略标记

要求一个属性在前台显示的时候,超过xxxx个字符的时候,将多出来的字符用...表示

实现:

通过增加css样式来控制

<span
  style="
	width: 300px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	position: absolute;
  "
  :title="student.number"
  >{{ student.number }}
</span>

1. 其中:text-overflow

text-overflow:clip|ellipsis                
        clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪
        ellipsis:当对象内文本溢出时显示省略标记(...)

2. 其中:white-space

white-space:
normal            默认,空白会被浏览器忽略。
pre                空白会被浏览器保留,其行为方式类似 HTML 中的 <pre> 标签。
nowrap            文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap        保留空白符序列，但是正常地进行换行。
pre-line        合并空白符序列，但是保留换行符。
inherit            规定应该从父元素继承 white-space 属性的值。

3. :title

表示在span上悬停几秒就能看到title里的内容

4. 当想从一行省略,变成三行出现省略

将white-space去除，并且加上:
		display:-webkit-box;
		-webkit-line-clamp: 3/*第几行裁剪*/
		-webkit-box-orient:vertical;
		-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 
	常见结合属性：
		display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
		-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
		text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
	div{
	  width:200px;
	  /* height: px; */
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display:-webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical;
	}