首页 前端知识 vue中文字超出显示省略号的两种情况,css实现文字超出显示省略号

vue中文字超出显示省略号的两种情况,css实现文字超出显示省略号

2024-04-01 10:04:32 前端知识 前端哥 546 770 我要收藏

 vue项目开发中常常出现文本太长超出后需要实现显示省略号的需求,而最为常见的就是单行和多行这两种情况,以下就简单的做个记录

一、单行显示省略号(这种情况非常常见,容器固定了宽度,而文本内容超出)

代码如下:

<template>
	<div>
		<divclass="box">aaaaa</div>
	</div>
</template>
<style>
	.box {
		width: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>

效果如下:

二、多行显示省略号 (容器设置了宽度,文本超出,末尾显示省略号)

注意:英文无效

代码如下:

<template>
	<div>
		<div class="box">好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好</div>
	</div>
</template>
<style>
	.box {
		overflow: hidden;
		text-overflow: ellipsis;
		width: 200px;
		/*将对象作为弹性伸缩盒子模型显示*/
		display: -webkit-box;
		/*限制文本行数*/
		-webkit-line-clamp: 2;
		/*子元素的排列方式*/
		-webkit-box-orient: vertical;
		/*将对象作为弹性伸缩盒子模型显示*/
	}
</style>

效果如下:

 补充:以下还用一种通过添加伪元素实现显示省略号,同样也是不适用于英文,具体实现的代码如下

<template>
	<div>
		<div class="box">好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好</div>
	</div>
</template>
<style>
	.box {
		margin: 100px auto;
		width: 200px;
		position: relative;
		height: 40px;
		line-height: 20px;
		overflow: hidden;
	}

	.box::after {
		content: '...';
		position: absolute;
		bottom: 0;
		right: 0;
	}
</style>

效果如下:

!!!最后如果各位大佬有更好的方法,也可以进行补充 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4350.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!