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

效果

前

后

核心代码

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

完整代码

<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>