表单对齐文字对齐
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
元素上产生此效果:
![alt](https://i-blog.csdnimg.cn/blog_migrate/9740ead93c63717d1d3388097661afda.png)
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
,该文本显示为未对齐状态,当您选择或突出显示该文本时可以看到:
![alt](https://i-blog.csdnimg.cn/blog_migrate/70d9950fdd2f1dcabb7504a3ea86e3e9.png)
解决方案 (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:
产生:
![alt](https://i-blog.csdnimg.cn/blog_migrate/0ab08947fd86c9e269dc84a176378c67.png)
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
表单对齐文字对齐