Hanging indentations
Hey together! I am trying to display references in a specific citation style, alongside a hanging indentation. Since the browser-support for text-indent: hanging is non-existent - MDN - I had to get creative with floating spacers and JS height calculations.
I'm generally speaking quite happy with the visuals, I just don't like employing (probably terribly written) JS for such a "seeminly" simple thing. Here's a pen of it, would love to hear if someone has suggestions!
https://codepen.io/Halbach_IO/pen/bGOWxBP
Thanks a lot and cheers π€
text-indent - CSS: Cascading Style Sheets | MDN
The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
12 Replies
if i'm not mistaken with what a hanging citation is, you can simply just target the desired lines you want to indent and give them a
margin-left.Sounds good at first, yet indentation doesnt usually start on a certain element (like journal title, url or else). It might very well be within a single text element
example:
if it's within the same element you can wrap the desired text in a
span tag and give it a display: block; to put it on a new line and margin-left to indent it. For example-
That concept would not work across screen sizes, since line breaks happen at different times
The indent can be done in pure CSS with a padding-left combined with negative text-indent.
i've never used text indent before but there you go ^
that's a cool solution!
you would use chooking's one, however to answer your other message, mine would work on all screen sizes too, the
display: block; always puts it on a new line, so when the text width shrinks it doesn't affect anything.Yeah that's the thing, it shouldnt break into a new line
But yeah here i sat for an hour trying to break the box model and the guy just does it with a 2-liner ;D
yeah man that's cool