uni-app:文本超出部分用省略号表示

效果

核心代码

white-space: nowrap;
/* 强制不换行 */
text-overflow: ellipsis;
/* 超过部分省略号代替 */
overflow: hidden;
/* 必须同时设置overflow:hidden才能生效 */

完整代码

html 复制代码
<template>
	<view>
		<view class="all_style">
			<view class="line1">
				aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		}
	}
</script>
<style>
	.all_style {
		width: 500rpx;
		height: 500rpx;
		border: 1px solid black;
	}

	.line1 {
		white-space: nowrap;
		/* 强制不换行 */
		text-overflow: ellipsis;
		/* 超过部分省略号代替 */
		overflow: hidden;
		/* 必须同时设置overflow:hidden才能生效 */
	}
</style>
相关推荐
Luffe船长7 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y8 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后8 小时前
使用 Service Worker 限制请求并发数
前端·service worker
java水泥工8 小时前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
鹿鹿鹿鹿isNotDefined8 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者8 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
stayong8 小时前
市面主流跨端开发框架对比
前端
庞囧9 小时前
大白话讲 React 原理:Scheduler 任务调度器
前端
东华帝君9 小时前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW9 小时前
手撕 Promise 一文搞定
前端·面试