昵称文本超出换行问题

pages/work/workinfo.vue

@@ -11,7 +11,7 @@
 						<image :src="postValue.avatar == '' ? '../../static/images/icon/tu3-9.jpg' :getAvatar(postValue.avatar)" mode=""></image>
 					</view>
 					<view class="user_msg">
-						<h4>{{postValue.nickName}}</h4>
+						<div class="nickNameBox">{{postValue.nickName}}</div>
 						<p>{{timeAgo(postInfo.createTime)}}{{postInfo.address ? '·'  + postInfo.address : ""}}</p>
 					</view>
 				</view>
@@ -358,10 +358,13 @@ function UNpass() {
 		}
 
 		.user_msg {
-			h4 {
+			.nickNameBox {
 				font-weight: 600;
-				width: 186rpx;
-				height: 31rpx;
+				max-width: 400rpx; /* 设置容器宽度 */
+				white-space: nowrap; /* 防止换行 */
+				overflow: hidden; /* 隐藏超出部分 */
+				text-overflow: ellipsis; /* 超出部分显示省略号 */
+				// height: 31rpx;
 				font-size: 30rpx;
 				text-align: left;
 				color: #000000 100%;