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

要求一个属性在前台显示的时候,超过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;
	}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一、网页设计与策划01 网页与网站的概念02 网页核心技术(HTML/CSS/JAVASCRIPT)简介03 什么是HTML04 什么是CSS05 什么是JavaScript06 网页的设计流程07 HTML5概述、浏览器及内核08 编写第一个HTML页面09 HTML页面基本结构10 章节练习二、网页的基本实现(HTML标签)01 HTML基本语法02 标签及属性03 标签04 标题标签05 段落标签06 水平分隔线标签07 换行标签08 文本的格式化标签09 特殊字符标签10 图像标签14 相对路径与绝对路径11 章节练习-《清平乐》12 章节练习-《李清照简介》13 章节练习-《家电排行》15 章节练习-《百度网简介》16 超级链接标签17 锚点链接18 影像地图19 《table》表格标签20 无序列表标签21 有序列表标签22 定义列表标签23 章节练习-《工资明细》24 章节练习-《我的电脑》25 章节练习-《在线考试》三、层叠样式表01 CSS简介02 CSS样式规则03 CSS样式的调用方法04 标签选择器05 类选择器06 ID选择器07 标签指定式选择器08 包含(后代)选择器09 群组选择器10 通配符选择器11 属性选择器12 关系选择器13 链接伪类选择器四、样式属性01 字体属性02 文本属性03 阴影效果04 对象溢出文本05 背景设置06 定义列表的样式五、盒模型网页布局01 初识盒子模型02 边框属性(border)03 边距属性(padding与margin)04 圆角边框05 阴影效果06 浮动属性(float)07 元素定位(position)08 溢出属性(overflow)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值