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;
相关推荐
我在北京coding26 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
Eiceblue33 分钟前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人1 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
超级土豆粉2 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~3 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中3 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互