單行文本
方法一(支持IE11,IE10,IE9,Chrome,FireFox):
效果圖:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section{
font-size: 0px;
/* height 和 overflow 一定得寫,否則會有一行空白行*/
height: 18px;
overflow: hidden;
}
div{
/* 為了使得標題和冒號在同一行,也可以用浮動使得在同一行或者用其他標簽 */
display: inline-block;
width: 100px;
font-size: 12px;
line-height: 18px;
text-align:justify;
text-justify: distribute-all-lines;
text-align-last: justify;
}
div:after{
content: '';
display: inline-block;
width:100%;
}
</style>
</head>
<body>
<!-- 如果想要對齊文字,也對齊冒號,最好將冒號單獨拿出來,不然只有冒號對齊了最后一個文字是不會對齊的-->
<!-- 在每個字中間打空格,不然火狐不支持 -->
<!-- 注意,當設置兩段對齊的元素的white-wrap為nowrap的時候對齊效果不生效 -->
<section><div class="title">車 牌 號</div><div>:</div></section>
<section><div class="title">行 駛 里 程</div><div>:</div></section>
<section><div class="title">車 架 號</div><div>:</div></section>
</body>
</html>