| Class | Properties |
|---|---|
| .lh-1 | line-height: 1; |
| .lh-sm | line-height: 1.25; |
| .lh-base | line-height: 1.5; |
| .lh-lg | line-height: 2; |
A simple way to adjust the line height of text.
<p class="lh-1">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-sm">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-base">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-lg">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.
This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.
This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.
This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.
Input
<p class="lh-1">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-sm">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-base">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-lg">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
Output
<p class="lh-1" style="line-height: 1; font-size: 16px; width: 100%; margin: 0;" align="left">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-sm" style="line-height: 1.25; font-size: 16px; width: 100%; margin: 0;" align="left">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-base" style="line-height: 1.5; font-size: 16px; width: 100%; margin: 0;" align="left">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>
<p class="lh-lg" style="line-height: 2; font-size: 16px; width: 100%; margin: 0;" align="left">This is test of text with different amounts of line height. What do you think of the line height for this text? Is it too large? Too small? The world may never know but I do hope that this works.</p>