text-overflow:ellipsis 不生效的情况解决办法

html 复制代码
<swiper :autoplay="true" :interval="3000" :duration="1000" circular vertical>
	<swiper-item v-for="item in 4">
		文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
	</swiper-item>
</swiper>
css 复制代码
swiper {
	height: 100%;
	
	&-item {
		// 以下三条是实现 文字长度超过显示宽度时展示省略号 的关键操作
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// 以上三条
	
		height: 100%;
		color: #666;
		font-size: 30rpx;
	
		// flex布局与 text-overflow: ellipsis;属性 冲突
		// display: flex;
		// flex-direction: row;
		// flex-wrap: nowrap;
		// align-content: center;
		// align-items: center;
		// justify-content: flex-start;
	
		align-content: center;
	}
	}

总结:

需要在包裹文字的外层块级元素上添加这三条属性:

css 复制代码
		overflow: hidden; // 超出文本的部分不显示
		white-space: nowrap; // 文本不换行显示
		text-overflow: ellipsis; // 文本溢出部分显示省略号

设置属性的元素必需是宽度有效的元素:

  • 块级元素(block level element) width、height 属性默认有效。
  • 内联元素(inline element 有的人也叫它行内元素)width、height 属性无效。
  • 可以通过改变display,使得width、height属性有效。如:添加display: block;
相关推荐
恋猫de小郭32 分钟前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5552 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
Freedom风间7 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军7 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪8 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer8 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发8 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中8 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron