How to limit the number of characters on a single line in a webpage using CSS?
Tags: css
Published: 2022-12-12 05:37:38

---
  title: How to limit the number of characters on a single line in a webpage using CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 11:07:38 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/limit-number-of-text-characters-on-single-line-webpage-using-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_a5a4a7990b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/limit-number-of-text-characters-on-single-line-webpage-using-css)
  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
<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
<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,

![texts in the webpage are expanded till the very end of the screen](/uploads/Screenshot_2022_11_10_at_7_22_31_PM_d7e93da568.png)

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
<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,

![webpage text got limited to 60 characters per line](/uploads/Screenshot_2022_11_10_at_7_35_41_PM_4420b55679.png)

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
<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>
```

![webpage texts is centered, responsive and with only 66 chracters in a single line](/uploads/Screenshot_2022_11_10_at_7_42_53_PM_800ea43e54.png)

**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?](https://melvingeorge.me/blog/make-font-size-grow-according-size-of-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](https://codesandbox.io/s/limit-number-of-text-characters-on-single-line-webpage-using-css-due3d5?file=/index.html).

That's all 😃.