To view the DEMO

For added aesthetics, it is necessary to align the ends of different words, as shown in the picture above

To achieve this, use text-align and text-align-last: justify

html

<div class="card">
	<div class="item">
		<div class="label">password</div>
		<div class="value">8888888888</div>
	</div>
	<div class="item">
		<div class="label">The user name</div>
		<div class="value">
			<a href="https://intolearn.com/">Front end _ funny uncle</a>
		</div>
	</div>
	<div class="item">
		<div class="label">email</div>
		<div class="value">[email protected]</div>
	</div>
	<div class="item">
		<div class="label">Mobile phone number</div>
		<div class="value">18888888888</div>
	</div>
	<div class="item">
		<div class="label">Favorite game</div>
		<div class="value">King glory</div>
	</div>
</div>
Copy the code

css

.card {
    box-sizing: border-box;
    color: rgba(0.0.0.65);
    font-size: 14px;
    position: relative;
    background: #fff;
    border-radius: 2px;
    width: 350px;
    padding: 16px;
    margin: 0 auto;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-bottom: 24px;
}
.card .item {
    display: flex;
    height: 30px;
    align-items: center;
}
.item .label {
    width: 80px;
    text-align: justify;
    text-align-last: justify;
    display: block;
    word-break: break-all;
    text-justify: distribute;
    position: relative;
    padding-right: 8px;
}
.item .label:after {
    content:':';
    position: absolute;
    right: 0px;
}
.item .value {
    flex: 1;
    padding-left: 24px;
}
Copy the code

The effect