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;
相关推荐
吃饺子不吃馅15 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多25 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆33 分钟前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar39 分钟前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel11 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端