表单对齐文字对齐_完全对齐的英雄文字和文字最后对齐

表单对齐文字对齐

Recently a student of mine pointed out a common web page layout problem that I had been unaware of. Of course, once it was pointed out to me, I couldn’t unsee it, and had to find a solution. On the same day, Šime Vidas made me aware of a subtle new CSS addition to control typographic layout. This article introduces both.

最近，我的一名学生指出了我一直未意识到的常见网页布局问题。 当然，一旦向我指出了这一点，我就看不到它了，不得不寻找解决方案。 在同一天， ŠimeVidas使我意识到控制印刷版式的微妙CSS新功能。 本文介绍了两者。

删除最后一个字母后的空格 (Eliminating Spaces After Last Letters)

In web page layout, letter-spacing also adds space after the last letter of the HTML content. With normal-sized type - left-justified paragraph text, for example - this end-space is invisible and unimportant. But on large, centered text, such as a heading, its presence can throw off the alignment of text. For example, using this CSS:

在网页布局中， letter-spacing还会在HTML内容的最后一个字母之后添加空格 。 对于普通大小的类型(例如，左对齐的段落文本)，此结束空间是不可见且不重要的。 但是在大而居中的文本(例如标题)上，它的存在可能会使文本的对齐方式偏离。 例如，使用以下CSS：

body { 
    margin: 0;
    min-height: 100vh;
    border-left: 25rem solid black; 
    border-right: 25rem solid black;
}
h1 { 
    text-align: center; 
    text-transform: uppercase; 
    font-family: Agency FB, Helvetica, sans-serif; 
    font-size: 8rem;
    letter-spacing: 2rem;
}

Produces this effect on an h1 element:

在h1元素上产生此效果：

Note the extra space on the right side

请注意右侧的额外空间

The text appears out of alignment due to the letter-spacing on the last letter, visible when you select or highlight the text:

由于最后一个字母的letter-spacing ，该文本显示为未对齐状态，当您选择或突出显示该文本时可以看到：

Excess letter-spacing highlighted on hero text

英雄文字上突出显示多余的字母间距

解决方案 (The Solution)

Move the text to the right using the same distance as the letter-spacing:

使用与字母间距相同的距离将文本向右移动：

h1 {
    margin-left: 2rem; 
}

This will offset the effect of the errant letter-spacing on the last letter, producing correctly aligned text.

这将抵消最后一个字母上错误的字母间距的影响，从而产生正确对齐的文本。

Note that you may have to adjust this number slightly to achieve correct optical alignment; in this case, a margin-left value of 1.7rem produced a more visually pleasing result.

请注意，您可能必须稍微调整此数字才能实现正确的光学对齐； 在这种情况下， margin-left值为1.7rem会产生视觉上更令人满意的结果。

文本最后对齐 (text-align-last)

When text is set flush both sides (text-align: justify) there is always the question of what to do with the last line. This CSS for the blockquote element:

设置文本齐平时( text-align: justify )，总是存在最后一行处理的问题。 该CSS用于blockquote元素 ：

blockquote { 
    font-family: Avenir, Helvetica, sans-serif;
    margin: 0 auto;
    width: 20%;
    text-align: justify;
    font-size: 1.3;
    line-height: 1.5;
}

…will always have the last line left-aligned.

…将始终使最后一行左对齐。

Newly supported in Chrome Canary, coming soon to mainline Chrome and supported for some time in Firefox (under a vendor prefix) and IE/Edge, text-align-last allows you to determine the alignment of that last line with a value of left (the default), center or right. Using the last value, in conjunction with the CSS above:

Chrome Canary新受支持，即将进入Chrome主流版本，并在Firefox(使用供应商前缀)和IE / Edge中受支持一段时间， text-align-last允许您确定最后一行的对齐方式为left (默认值)， center或right 。 将最后一个值与上述CSS结合使用：

p { 
    -moz-text-align-last: right;
    text-align-last: right;
}

Produces:

产生：

Last line in fully flush text aligned to the right

完全齐平的文本中的最后一行向右对齐

This can add a subtle but effective finish to text, especially text set in a thin, tall column.

这可以为文本添加微妙但有效的修饰效果，尤其是在细而高的列中设置的文本。

翻译自: https://thenewcode.com/22/Perfectly-Aligned-Hero-Text-and-text-align-last

表单对齐文字对齐