H5 文字单行显示

前端开发中经常会使用到单行显示文字的样式。下面的css样式就可以满足。

<text class="text-normal-line">{{ dailyHours }}</text>

<style lang="scss" scoped>
	.text-normal-line{
		width:calc(100% - 130rpx);
		overflow: hidden;
		text-overflow:ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
		-webkit-box-orient: vertical; /* 垂直排列 */
		line-clamp: 1;
		word-break: break-all;  
		}
</style>

这样不管文本内容有多长，text内容就只显示一行，超出文本宽度的内容显示成了 “…”