How to limit the number of characters on a single line in a webpage using CSS?

#css

Originally posted here!
To limit the number of characters that should be on a line on the webpage, you can use the max-inline-size CSS property on the HTML elements that wrap the texts and use a numeric value with the ch unit (ch refers to the number of characters).

TL;DR

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Adding `max-inline-size: 66ch` CSS property 
    to limit the characters of a single line to 66.
  -->
  <style>
    article {
      max-inline-size: 66ch;
      font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
      margin: 20px auto;
    }
  </style>
</html>

For example, let's say we have a webpage with some paragraphs of text inside an article HTML element.

The HTML code would look something like this,

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
</html>

Now if we see this without any styles, the text would go to the very edge of the screen like this,

This is not looking any good and very hard for the users to read the texts.

So to limit the paragraphs texts we can use the max-inline-size property and give a value of 66ch.

The 66ch value refers to limiting the characters in a single line to 66 characters.
The max-inline-size property is the new internationalized version of the max-width property. The max-inline-size property helps to automatically correct the width according to the writing direction of a particular language.

It can be done like this,

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Adding `max-inline-size: 66ch` CSS property 
    to limit the characters of a single line to 66.
  -->
  <style>
    article {
      max-inline-size: 66ch;
    }
  </style>
</html>

After adding the max-inline-size: 66ch CSS property, the webpage now looks like this,

Let's also add some CSS styles to center the texts and to make them grow according to the size of the screen.

It can be done like this,

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Adding `max-inline-size: 66ch` CSS property 
    to limit the characters of a single line to 66.
  -->
  <style>
    article {
      max-inline-size: 66ch;
      font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
      margin: 20px auto;
    }
  </style>
</html>

NOTE: To know more about making texts responsive see the blog on How to make font size grow according to the size of the screen using CSS?

We have successfully limited the characters to 66 in a single line using CSS. Yay 🥳!

See the above code live in the codesandbox.

That's all 😃.

DEV Community

How to limit the number of characters on a single line in a webpage using CSS?

TL;DR

Top comments (0)

Read next

Share 4 Animation Libraries to Help You Create a Visual Feast and Double Your Chill Time!

CSS Grid – Building Complex Layouts with Ease

The Full-Stack Components Customization Pyramid

Flexbox – The Modern Way to Align and Distribute Space