用于精确偏移文本的 CSS 公式
[英]CSS Formula for Precisely Offsetting Text
问题描述
On my website, I am aligning a body of text precisely as exemplified in the following snippet.
在我的网站上，我正在按照以下代码段中的示例精确对齐文本正文。
html, body { width: 100%; height: 100%; font-family: arial; font-size: 48px; text-transform: uppercase; } body { margin: 0; background: skyblue; } div { width: 200px; height: 100vh; padding-top: calc(100vh - (1.5rem * 1.35)); box-sizing: border-box; border: solid red 1px; } span { line-height: 1.35; display: inline-block; border: solid black 1px; }
<div><span>This</span> <span>is</span> <span>a</span><span>body</span><span>of</span> <span>text.</span></div>
However, I was hoping to take it one step further.然而，我希望更进一步。 For instance, I want to be able to place the top of the text as close as possible to, say, 60vh from the top of the page while still displaying half of the last line.例如，我希望能够将文本的顶部放置在离页面顶部尽可能接近60vh的位置，同时仍显示最后一行的一半。 Below is an example of what I mean in JS.下面是我在 JS 中的意思的一个例子。
Note: Just noticed the second snippet does not display properly unless you open it to edit it.注意：刚刚注意到第二个代码段无法正确显示，除非您打开它进行编辑。 If you transfer it to codepen, it should work properly.如果您将其转移到 codepen，它应该可以正常工作。
const div = document.querySelector('div'), span = document.querySelector('span'), lineHeight = parseFloat(getComputedStyle(span).lineHeight), target = innerHeight * 0.6, remainder = (innerHeight - target) / lineHeight % 1 * lineHeight div.style.paddingTop = target + remainder - lineHeight / 2 + 'px'
html, body { width: 100%; height: 100%; font-family: arial; font-size: 48px; text-transform: uppercase; } body { margin: 0; background: skyblue; } div { width: 200px; height: 100vh; position: absolute; box-sizing: border-box; border: solid red 1px; } span { line-height: 1.5; display: inline-block; border: solid black 1px; }
<div><span>This</span> <span>is</span> <span>a</span> <span>body</span> <span>of</span> <span>text.</span></div>
Notably, I know you can obviously find the "remainder" using calc , viewport units, and rem , but the rest is what is confusing because I am not great at math and also lacking sleep.值得注意的是，我知道您显然可以使用calc 、视口单位和rem找到“余数”，但剩下的就是令人困惑的，因为我不擅长数学，也缺乏睡眠。
Hence I was hoping that somebody out there, who is better at math than me, would be able to tell me whether or not a pure CSS solution without preprocessors is possible (ie using only calc , viewport units, rem units, etc) before I waste any more time thinking about this.因此，我希望在数学上比我更好的人能够告诉我是否可以在没有预处理器的情况下使用纯 CSS 解决方案（即仅使用calc 、视口单位、 rem单位等），然后再我再浪费时间考虑这个。 I know there are some nifty CSS formulas for fluid typography, but is something like this possible?我知道有一些用于流体排版的漂亮 CSS 公式，但是这样的事情可能吗？
[ edit ] I thought about this some more while laying in bed. [ 编辑 ] 我躺在床上时又想了一会儿。 I do not believe it is possible without being able to calculate the "remainder."我认为无法计算“余数”是不可能的。 And there does not seem to be any way to calculate the "remainder" with only addition, subtraction, multiplication, and division.而且似乎没有任何方法可以仅通过加减乘除来计算“余数”。 Please correct me if I am wrong.如果我错了，请纠正我。
1 个解决方案
解决方案1
0 2020-10-28 13:54:41
The goal is to have the DIV tag be 100% of the document's height and then the text is offset a little bit within the DIV?目标是让 DIV 标签是文档高度的 100%，然后文本在 DIV 内偏移一点？
I think just adding another tag within the DIV to offset all the text can work.我认为只需在 DIV 中添加另一个标签来抵消所有文本即可。 You said you want 60vh.你说你想要 60vh。 Line Height should also be used when dealing with text height.处理文本高度时也应使用行高。
html, body { width: 100%; height: 100%; font-family: arial; font-size: 48px; text-transform: uppercase; } body { margin: 0; background: skyblue; } div { width: 200px; height: 100vh; box-sizing: border-box; border: solid red 1px; } p { margin: 0; padding-top: 60vh; margin-top: -0.8em; line-height: 1.6em; } span { line-height: 1.35; display: inline-block; border: solid black 1px; }
<html> <body> <div><p><span>This</span> <span>is</span> <span>a</span><span>body</span><span>of</span> <span>text.</span></p></div> </body> </html>
Or is this not quite it?或者这不完全是这样？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.