css 两个字和三个字对齐

458 阅读1分钟

两个字和三个字对齐

  1. text-align: justify; 字节对齐, 除最后一行 其他行对齐
  2. 添加 span 子标签
<template>
	<div class="other-item">
		<div class="o-u-scroll-num">{{text}}<span></span></div>
	</div>
	
</template>

<script>
	export default {
		props: {
			text: String
		}
	}
</script>

<style scoped>
	.other-item {
		width: 100%;
		height: 24px;
		overflow: hidden;
		position: relative;
	}
	.o-u-scroll-num {
		position: absolute;
		left: 50%;
		top: 0;
		font-size: 16px;
		line-height: 24px;
		font-weight: 400;
		color: #FFFFFF;
		min-width: 50px;
		transform: translateX(-50%);
		text-align: justify;
	}
	.o-u-scroll-num > span {
		display: inline-block /* Opera */;
		padding-left: 100%;
	}
</style>