在项目中,遇到一些信息列表描述的需求时,很多时候,设计给出来的设计图大概会类似于如下格式:
这种需求应该也属于常见需求了,之前遇到的时候确实也没什么特别好的办法,基本上都是依靠给文字之间加上空格来保证同等宽度的两端对齐。
前两天,看到有人也遇到类似问题了,就想着是不是可以完全依赖css来解决,思考之中,想来在一定的变通之后,text-align: justify似乎应该能够解决这一需求。
也看了一些其他人解决这一方案的文章,最终觉得还就是text-align: justify最靠谱。
我们都知道text-align: justify设置文本对齐的话,针对的并不是单行的文本,所以这里就需要我们进行变通了。
<div class="align-justify"> <dl> <dt>姓名<i></i></dt> <dd>:</dd> <dd>张三丰</dd> </dl> <dl> <dt>所属学校<i></i></dt> <dd>:</dd> <dd>南京第一附属学校</dd> </dl> <dl> <dt>归属地<i></i></dt> <dd>:</dd> <dd>南京</dd> </dl> </div>
.align-justify { padding: 0 0.3rem; } .align-justify dl { font-size: 0.3rem; line-height: 2; color: #4a4a4a; height: 0.6rem; overflow: hidden; } .align-justify dl > * { display: inline-block; line-height: 2; vertical-align: top; } .align-justify dl > dt { 5em; text-align: justify; line-height: 2; overflow: hidden; } .align-justify dl > dt span { display: inline-block; vertical-align: top; line-height: 2; } .align-justify dl i { display: inline-block; 100%; height: 0; }
其实,利用的也就是text-align: justify两队对齐,在文本最后加一个i标签,这个标签名无所谓哪个标签都可以,然后设置其为display:inline-block; 100%; 让其与文本同一行,宽度100%之后,就自然而然的自动换行了。
而由于多余标签i会独占一行,所以对dl需要设置高度,并进行overflow: hidden;或者对dt设置也可以。