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>