css的文本两端对齐
时间：2023-03-30 14:20:35
CSS
简单示例文本两端对齐，首先想到的是text-align：justify，在实际应用中，一段文本内容：两端对齐相对于左对齐，视觉上整齐有序。但是justify对最后一行没有影响。通常，这样的排版对整个文本来说是极好的。当最后一行只有两个单词时，我们不想让两端对齐。毕竟读书不是一件容易的事。那么当我们只有一行Text，但是如何解决单行文本两端对齐的问题
但是这个属性对于最后一行文本是无效的，需要强制最后一行为对齐，例如：
Name:wqjiao出生日期：1992.05.25报名地点：安徽怀远.item{height:32px;行高：32px；底部边距：8px；.label{显示：内联块；高度：100%；宽度：100px；文本对齐：对齐；垂直对齐：顶部；&::after{显示：内联块；宽度：100%；内容：'';//额外加倍高度，更多出口21高度：0；}}.value{padding-right:10px;}}不过，上面的实现方式比较麻烦。新的css属性text-align-last定义了文本中的最后一行强制换行上述对齐规则的scss可以替换为：.item{margin-bottom:8px;.label{显示：内联块；高度：100%；最小宽度：100px；文本对齐：对齐；-ms-text-align-last:justify;-moz-text-align-last：对齐；text-align-last：对齐；}.value{padding-right:10px;}}text-align-last属性介绍CSS属性text-align-last描述了文本最后一行强制换行前的对齐规则。该属性的默认值为auto；适用于块状容器元素；属性可以被继承语法auto|开始|结束|左|对|中心|取值为justify，text-align-last的表现与设置start相同，即如果文本的显示方向是从左到右，则最后一行的左对齐与内容框。译者注：经测试，当text-align的值为right且text-align-last设置为auto时，最后一行文本的对齐方式等同于text-align-last设置为right时的效果。即设置text-align-last为auto后的性能与text-align的设置有关。-启动与方向的设置有关。如果文字显示方向是从左到右，起点在左边，则为左对齐；如果文字显示方向是从右到左，起点在右侧，则为右对齐。如果不设置方向，则根据浏览器文字的默认显示方向确定。direction默认值fromlefttorightltrltr--从左到右rtl--从右到左-end与方向的设置有关。如果文字显示方向是从左到右并在右侧结束，则为右对齐；如果文本显示方向是从右到左并在左侧结束，则为左对齐。如果不设置方向，则根据浏览器文字的默认显示方向确定。-left最后一行文本与内容框的左侧对齐-right最后一行文本与内容框的右侧对齐-center最后一行文本与内容框的中心对齐-justify最后一行文本与内容框的左侧对齐，结尾向右对齐。浏览器兼容性
