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;
相关推荐
雾恋3 小时前
最近一年的感悟
前端·javascript·程序员
A黄俊辉A3 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理4 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人4 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥304 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
小*-^-*九5 小时前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
BillKu5 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
慢半拍iii5 小时前
JAVA Web —— A / 网页开发基础
前端
gnip6 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
新手村领路人7 小时前
Firefox自定义备忘
前端·firefox