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
66chvalue refers to limiting the characters in a single line to 66 characters. - The
max-inline-sizeproperty is the new internationalized version of themax-widthproperty. Themax-inline-sizeproperty 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 😃.
Top comments (0)