Home Using only CSS, is there a way to limit text inside a div to exactly, X number of characters without the use of Ellipsis?

Questions

Using only CSS, is there a way to limit text inside a div to exactly, X number of characters without the use of Ellipsis?

byMR

April 15, 2024

I know we can limit text to certain characters using Ellipsis or even use JavaScript. But I am wondering if there is no JavaScript available, and I don’t want Ellipsis(…) at the end of my text, is this do able with just using CSS?

For instance say I have the following HTML – If I want to limit myText to just 20 characters(with spaces) how would I do that?

<div class="myDiv">
  <p class="myText">HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting
    languages such as JavaScript.</p>
</div>

>Solution :

I think the only way without Javascript is to use a monospace font and the CSS ch unit

.myDiv {
  width: 20ch;
  overflow: hidden;
  font-family: Courier, monospace;
  white-space: nowrap;
}

<div class="myDiv">
  <p class="myText">HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting
    languages such as JavaScript.</p>
</div>