H5 text single line display

The style of displaying text in a single line is often used in front-end development. The following css style can be satisfied.

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

In this way, no matter how long the text content is, the text content will only display one line, and the content exceeding the text width will be displayed as "..."