All geek questions in one place

How to indent text exactly one character width

The prerequisite is that I use monospaced as a font family , but it doesn’t work properly, I tried some solution, work, my HTML structure looks like this:

<!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 the value? */ } </style> <div>123456</div> <div>abcdef</div>

  • use em

    em should be equal to the value of the calculated font size , but padding-left: 1em; does not work:

    em

  • use px

    padding-left: 32px; draws the same conclusion as padding-left: 1em; .

  • use ex

    ex must be the calculated height of the letter "x" , and it also does not work:

    ex

  • use ch

    OK, webkit does not support ch as a css block.

So, how can I write css exactly by indenting the second div the width of one character , that is, the first "0" should be left-aligned to the letter "b", without any deviations.

+6
source share
2 answers

One possible way, albeit a bit hacked, would be to insert a space before the line using the :before pseudo- :before with content :

 div:last-of-type:before { content: " "; white-space: pre; }

I have no idea which browsers support this, but I assume that all modern browsers will be.

http://jsfiddle.net/cavqM/

+6
source

Based on Tatu's approach, you can use a unicode representation of a single discontinuous space such as &nbsp;

 div:last-of-type:before { content: "\00a0"; /* this is &nbsp; */ }

NTN

- hennson

+2
source

Source: https://habr.com/ru/post/909262/

More articles:


All Articles