How to Reduce Line Gaps when font-size: 50%;

Authoring Twine
1

When I set some text to 50% size, the gaps between the lines (same line wrapped to multiple lines) becomes very large.
I tried setting line-height to a very small number; but it didn’t do anything.

.s50Text {
font-size: 50%;
line-height: 0.1;
}

How can I remove that gap?
Thank you.

image
image1041×236 11 KB

Twine Version: 2.4.1
Story Format: SugarCube

2

When you assign an ununited number as the value of a CSS line-height property it acts as a multiplier of the current font-size’s height. So when you assign 0.1 as the value you are stating you want the height of the line to be 1/10 of the height of the current font, which makes no sense.

3

Sadly, showing us only half of your work is less helpful than you think. Details matter, so help us help you.

How are you using that class? Are you applying it as a passage tag, on a wrapper element, something else entirely?

1 Like
4

In my overall Stylesheet, I have

body {
  font-size: 125%;
}

.s50Text {
  font-size: 50%;  
}

Then in passages, I apply the style in span, resulting in large gaps for small fonts.

<span class="s50Text">here is the small text with big gaps between lines when wrapped</span>

How can I reduce that gap?
Thanks.

5

Are you doing:

<span class="s50Text">line
line
line</span>

Or:

<span class="s50Text">line</span>
<span class="s50Text">line</span>
<span class="s50Text">line</span>
6

It’s like the first one but a little bit different. It’s

<span class="s50Text">one long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line long line</span>

This long line would become multiple lines (with large gaps) when wrapped as browser size changes.
Thanks.

7

Change the display property of the <span> element to inline-block, which will alter how line-height behaves during the wrapping of a long line of text.

.s50Text {
	font-size: 50%;
	line-height: 1;
	display: inline-block;
}

note: You can change the line-height value to whatever you like, including values less than 1 now that the display property is no longer just inline.

8

It works! Thank you.