如何将文本缩进一个字符宽度
ota*_*tay 9 css fonts text-indent
前提条件是我使用monospace作为我的font-family,但它似乎没有正常工作,我尝试了一些解决方案,但是它们的工作正常,我的HTML结构如下:
<!DOCTYPE html>
<style>
body {
font-family: monospace;
letter-spacing: 0;
word-spacing: 0;
font-size: 32px; /* large enough to see the effect */
}
div:last-of-type {
padding-left: 1em; /* what's the value? */
}
</style>
<div>123456</div>
<div>abcdef</div>
用em
em应该等于计算的font-size值,但是padding-left:1em; 不起作用:
使用px
padding-left:32px; 输出与padding-left相同的输出:1em; .
用ex
ex应该是字母'x'的计算高度,它也不起作用:
用ch
好的,webkit 不支持ch作为css单元.
那么如何编写css来精确缩进第二个div的一个字符宽度,也就是说,第一个'0'应该左对齐字母'b',没有任何偏差.
一种可能的方法,虽然有点hacky,但是使用:before伪选择器在行之前插入一个空格content:
div:last-of-type:before {
content: " ";
white-space: pre;
}
我不知道哪些浏览器支持这个,但我认为所有现代浏览器都会.
小智 7
基于 Tatu 的方法，您可以使用不可破坏空间的 unicode 表示，例如
div:last-of-type:before {
content: "\00a0"; /* this is */
}
哈特哈，
——汉森