css两端对齐justify方法

Joker • • 前端笔记 • 381 阅读

     在网页布局中，会要用到css两端对齐，下面的两种css两端对齐justify方法是对文字对齐方式处理，css两端对齐text-align-last: justify和css两端对齐text-justify+after，注意外层盒子要给width值。

css两端对齐justify方法

方法1：css两端对齐text-align-last: justify




css两端对齐text-align-last: justify

* {
margin: 0;
padding: 0;
}
.box {
width: 60px;
margin: 100px auto;
border: 1px solid red;
}
.box .item {
text-align-last: justify;
}




姓名
年龄

效果：

css两端对齐text-align-last: justify

方法2：css两端对齐text-justify+after




css两端对齐text-justify+after

* {
margin: 0;
padding: 0;
}
.box {
width: 60px;
margin: 100px auto;
border: 1px solid red;
}
.box .item {
text-align: justify;
}
.box .item::after{
content: '';
display: inline-block;
padding-left: 100%;
}




姓名