Notes|html文字一行时靠右，多行时靠左 css|前端|html

移动端常用的单元格，经常有这样的布局，左边label，右边内容区域，当内容文字靠右时，需要一行时靠右，多行时靠左。

文章图片

实现1

单元格内容单元格内容内容内容内容内容内容内容内容内容内容内容内容

.cell { display:flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e5e5e5; } .cell .cell-label { width: 120px; }

实现2

单元格内容单元格内容内容内容内容内容内容内容内容内容内容内容内容

.cell { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e5e5e5; } .cell .cell-label { width: 120px; } .cell .cell-value { flex: 1; text-align: right; } .cell .cell-value .content { text-align: justify; display: inline-block; }

【Notes|html文字一行时靠右，多行时靠左】实现3

单元格内容单元格内容内容内容内容内容内容内容内容内容内容内容内容

.cell { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e5e5e5; } .cell .cell-label { width: 120px; } .cell .cell-value { flex: 1; } .cell .cell-value .content { display: flex; justify-content: flex-end; }