css 控制多个标签进行裁剪仅展示一行（vue代码）

最新推荐文章于 2023-09-06 13:46:11 发布

菜鸟中的菜菜鸟

最新推荐文章于 2023-09-06 13:46:11 发布

阅读量765

点赞数 1

分类专栏：一天一个前端小技巧文章标签： css vue.js javascript 前端 css3

本文链接：https://blog.csdn.net/qq_39692513/article/details/122805252

版权

本文介绍了如何使用CSS在Vue项目中控制多个标签只展示一行，并进行裁剪。通过设置固定高度、word-break: break-all防止文字断行，以及overflow: hidden隐藏超出部分。

摘要由CSDN通过智能技术生成

template

	<div class="tag_div" v-if="judgeShowTag()">
			<span
				class="tag"
				v-for="(tag, index) in info.tags"
				:key="`tag${index}`"
				>{
  { tag }}</span
			>
		</div>

style

tag_div {
   	height: 19px;
   	overflow: hidden;
   	word-break: break-all; //固定高度，超过直接折行，使用overflow隐藏
   	.tag {
   		display: inline-block;
   		padding: 0 5px;
   		height: 19px;
   		margin-bottom: 2px;
   		margin-right: 6px;
   		font-family: PingFangSC-Regular;
   		font-size: 12px;
   		color: $disabled-sub-color;
   		font-weight: 400;
   		line-height: 19px;
   		background-color: #f4f4f4;
   		border-radius: 9.5px;
   		vertical-align: top;
   	}
   }