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;
相关推荐
好_快40 分钟前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快40 分钟前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快42 分钟前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel1 小时前
webpack 核心编译器 十四 节
前端
excel1 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪12 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy12 小时前
macOS 命令行 原生挂载 webdav 方法
前端