Formatting Text

Bold

You can make text bold by adding the class bold. Bold text typically uses a strong element.

Example

The term bold refers to text that's thicker than the text around it.

<p class="paragraph">
  The term <strong class="bold">bold</strong> refers to text
  that's thicker than the text around it.
</p>

Italic

You can make text italic by adding the class italic. Italic text typically uses an em element.

Example

The reason the standard HTML element for italic text is called em is because it stands for emphasis.

<p class="paragraph">
  The reason the standard HTML element for italic text is
  called <code class="code">em</code> is because it stands
  for <span class="italic">em</span>phasis.
</p>

Underline

You can make text underlined by adding the class underline.

Example

This text is underlined.

<p class="paragraph">
  This text is <span class="underline">underlined</span>.
</p>

Strikethrough

You can create strikethrough text by adding the class strikethrough. Strikethrough text typically uses an s element.

Example

This text is ~~strikethroughed~~ ~~striked through~~ crossed out.

<p class="paragraph">
  This text is
  <s class="strikethrough">strikethroughed</s>
  <s class="strikethrough">striked through</s>
  crossed out.
</p>

Combining Underline and Strikethrough

Behind the scenes, underline and strikethrough both use the same CSS property. The underline and strikethrough classes automatically handle this, so you can combine them without any issues.

Subscript

You can create subscript text by adding the class subscript. Subscript text typically uses a sub element.

Example

The formula for water is H₂O.

<p class="paragraph">
  The formula for water is H<sub class="subscript">2</sub>O.
</p>

Superscript

You can create superscript text by adding the class superscript. Superscript text typically uses a sup element.

Example

The speed of light is 3.00 x 10⁸ m/s.

<p class="paragraph">
  The speed of light is 3.00 x 10<sup class="superscript"
    >8</sup
  >
  m/s.
</p>

Inline Code/Monospaced Text

You can format inline code or monospaced text by adding the class code. There are multiple elements that can be used for monospaced text based on semantics.

Example

To print "Hello, World!" in Python, you would write print("Hello, World!").

<p class="paragraph">
  To print "Hello, World!" in Python, you would write
  <code class="code">print("Hello, World!")</code>.
</p>

Line Clamping

You can limit text to a specific number of lines by adding the class clamp-n, where n is a number between 1 and 6. Browsers will ensure that text does not exceed this number of lines, adding an ellipsis (...) if there is additional text that is not visible.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum at sem et tristique. Sed elementum, dolor ut vulputate scelerisque, urna dolor dignissim ipsum, nec porta magna ante et dolor. Quisque est ligula, pulvinar ut pharetra sed, tempor nec neque. Suspendisse accumsan pellentesque metus, at elementum leo fringilla nec. Cras iaculis nisi nec laoreet posuere. Suspendisse varius, lacus at lacinia tristique, dolor tortor rutrum augue, a sodales risus metus at nibh. Praesent imperdiet mollis urna, ut blandit nulla facilisis in. Donec ac mi nisl. Sed ultricies dignissim leo, eu suscipit ante pharetra vel. In ultrices ex ut ligula tempus mollis. Aliquam mollis laoreet diam, non convallis tellus tincidunt eu. Nullam a turpis sodales, laoreet magna eu, pharetra nisi. Integer feugiat justo at tellus fringilla, ut commodo lorem semper.

<p class="paragraph clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Fusce condimentum at sem et tristique. Sed elementum,
  dolor ut vulputate scelerisque, urna dolor dignissim
  ipsum, nec porta magna ante et dolor. Quisque est ligula,
  pulvinar ut pharetra sed, tempor nec neque. Suspendisse
  accumsan pellentesque metus, at elementum leo fringilla
  nec. Cras iaculis nisi nec laoreet posuere. Suspendisse
  varius, lacus at lacinia tristique, dolor tortor rutrum
  augue, a sodales risus metus at nibh. Praesent imperdiet
  mollis urna, ut blandit nulla facilisis in. Donec ac mi
  nisl. Sed ultricies dignissim leo, eu suscipit ante
  pharetra vel. In ultrices ex ut ligula tempus mollis.
  Aliquam mollis laoreet diam, non convallis tellus
  tincidunt eu. Nullam a turpis sodales, laoreet magna eu,
  pharetra nisi. Integer feugiat justo at tellus fringilla,
  ut commodo lorem semper.
</p>