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>
相关推荐
蓝天星空30 分钟前
html生成注册与登录代码
javascript·css·html
宜昌李国勇35 分钟前
`http_port_t
android·前端
我家猫叫佩奇39 分钟前
React项目eslint8 升级到 9记录
前端
API_Zevin1 小时前
如何优化亚马逊广告以提高ROI?
大数据·开发语言·前端·后端·爬虫·python·学习
野槐1 小时前
CSS进阶和SASS
前端·less·scss
玩具工匠2 小时前
字玩FontPlayer开发笔记3 性能优化 大量canvas渲染卡顿问题
前端·javascript·vue.js·笔记·elementui·typescript
m0_748248772 小时前
YOLOv5部署到web端(flask+js简单易懂)
前端·yolo·flask
qwaesrdt32022 小时前
【如何使用大语言模型(LLMs)高效总结多文档内容】
前端
videring2 小时前
ckeditor5-engine(2)——Model
前端·javascript·架构
Ace_31750887762 小时前
淘宝平台通过关键字搜索获取商品列表技术贴
前端