HTML多行文本溢出控制最后一行显示省略号样式

HTML多行文本溢出显示省略号一、text-overflow属性二、单行文本溢出显示省略号三、多行文本溢出控制最后一行显示省略号样式一、text-overflow属性text-overflow具有三个值。一个是clip，修剪文本。第二个就是今天的主角ellipsis，显示省略符号来代表被修剪的文本。第三个是string，使用给定的字符串来代表被修剪的文本，不过一般都不使用这个值。clip的值whi

轻叹年华逝，

11809人浏览 · 2020-12-23 20:31:23

轻叹年华逝， · 2020-12-23 20:31:23 发布

HTML多行文本溢出显示省略号

一、text-overflow属性
二、单行文本溢出显示省略号
三、多行文本溢出控制最后一行显示省略号样式

一、text-overflow属性

text-overflow具有三个值。

一个是clip，修剪文本。

第二个就是今天的主角ellipsis，显示省略符号来代表被修剪的文本。

第三个是string，使用给定的字符串来代表被修剪的文本，不过一般都不使用这个值。

clip的值

white-space:nowrap; 
width:200px; 
overflow:hidden;
text-overflow:clip;

表现出来的形式大概就是这种，它也得用white-space:nowrap 和overflow:hidden两个才能表现出裁剪的效果。
在这里插入图片描述

二、单行文本溢出显示省略号

单行文本溢出显示省略号也是一个连招，比较简单

width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

表现出来的效果是这样式的
在这里插入图片描述

三、多行文本溢出控制最后一行显示省略号样式

接下来重点来啦，利用display: -webkit-box，将对象作为弹性伸缩盒子模型显示，-webkit-line-clamp限制第几行显示省略号，-webkit-box-orient: vertical设置或检索伸缩盒对象的子元素的排列方式就可以完成这样的效果啦
在这里插入图片描述


<body>
	<div class="test">这是一个很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</body>
<style>
.test{
	width:100px;
	overflow : hidden;				/*必须结合的属性,当内容溢出元素框时发生的事情*/
	text-overflow: ellipsis;		/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
	display: -webkit-box;			/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
	-webkit-line-clamp: 2;			/*用来限制在一个块元素显示的文本的行数。*/
	-webkit-box-orient: vertical;	/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
}
</style>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

从单体大模型到协作智能：预训练–微调–对齐模型“接力”刷新AI上限

2048 AI社区

Pytorch安装和CUDA的安装

本文详细介绍了CUDA和PyTorch-GPU环境的安装配置流程。主要内容包括：1)检查GPU设备并更新NVIDIA驱动；2)下载匹配的CUDA版本(12.3)并安装；3)配置对应的cuDNN加速库；4)使用conda创建Python虚拟环境(3.9)；5)安装PyTorch-GPU版本(需与CUDA版本匹配)；6)测试验证GPU是否可用。文中还提供了镜像源设置、环境变量配置等实用技巧，以及CPU