text-align: end 和 right 之间的区别

Question

text-align: end; 和 text-align: right; 有什么区别？

当我使用任何一个时，我得到相同的结果，但是有什么不同吗？

Answer 1

根据https://developer.mozilla.org/en/docs/Web/CSS/text-align：

end
The same as right if direction is left-to-right and left if direction is right-to-left.

right
The inline contents are aligned to the right edge of the line box.

基本上，您将 end 与 direction: [rtl|ltr] 串联使用，end 会相应地进行调整，而无论您朝哪个方向，right 都会始终将您的文本保持在 right设置。

https://jsfiddle.net/ths4kdmx/

.end {
  text-align: end;
}
.right {
  text-align: right;
}
.dir-ltr {
  direction: ltr;
}
.dir-rtl {
  direction: rtl;
}

<div class="dir-ltr end">
  End alignment in left-to-right direction
</div>
<div class="dir-rtl end">
  End alignment in right-to-left direction
</div>
<div class="dir-ltr right">
  Right alignment in left-to-right direction
</div>
<div class="dir-rtl right">
  Right alignment in right-to-left direction
</div>

Answer 2

是的，根据css-tricks：

There are two new values in CSS3 as well, start and end. These values make multiple language support easier For example, English is a left-to-right (ltr) language and Arabic is a right-to-left (rtl) language. Using "right" and "left" for values is too rigid and doesn't adapt as the direction changes. These new values do adapt:

1: start - Same as "left" in ltr, same as "right" in rtl.

2: end - Same as "right" in ltr, same as "left" in rtl.

查看详情：text-align in CSS

text-align: end 和 right 之间的区别

Difference between text-align: end and right

css

text-alignment