CODEWITHSUNDEEP
reactjs
MestreALMO
MestreALMO

Reputation: 171

How can we get a text and make it so it is display only a in limited amount of characters?

I have a text that has a lot of characters, and I need to limit what is displayed on screen to 20 chraracter only, what do I do?

Example: if I wish to display only 20 character of the following text, what should I do?

function App() {
  return (
    <>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
        accusamus nostrum harum! Tenetur incidunt saepe explicabo rerum et
        cumque architecto reiciendis, deleniti asperiores animi? Perspiciatis
        vel nemo vitae nulla iure itaque iste pariatur aliquam unde quis magni,
        quasi culpa in quisquam, sunt, corrupti ipsa! A sunt consectetur
        aspernatur porro, exercitationem quasi, quibusdam mollitia numquam, aut
        veniam voluptate? Esse, animi quibusdam voluptatem eligendi aliquam
        minima nam impedit eum dignissimos praesentium, quae consequuntur,
        deserunt neque? Tenetur, quae nihil. Sit, iure, itaque placeat beatae
        distinctio nesciunt quisquam fugiat illo quod eius, architecto optio.
        Rerum repudiandae perferendis vero laborum obcaecati vel aliquam quod
        distinctio in id similique, quisquam odit accusantium quos veritatis
        animi autem iste possimus, odio corrupti. Perferendis tenetur, non quis
        animi rerum earum error sed officiis sint expedita et ipsum? Omnis nihil
        non, tenetur veniam officiis repudiandae nobis, ab commodi inventore sed
        maxime. In porro quo perspiciatis facilis. Maxime saepe, ipsa autem
        eligendi cumque delectus provident vel aliquam fuga aut laborum facere
        beatae repellendus, minus in quae exercitationem porro! Quod nesciunt
        libero natus exercitationem beatae, accusamus maxime sint aliquam
        voluptate aspernatur in dignissimos perferendis quo minima odio omnis,
        officiis neque ullam, et commodi perspiciatis. Explicabo error ea
        necessitatibus reprehenderit consequuntur inventore reiciendis!
      </p>
    </>
  );
}

export default App;

Upvotes: 0

Views: 158

Answers (1)

Daniel Kelsch
Daniel Kelsch

Reputation: 443

You can use CSS using the ch unit I believe.

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

That being said I think you have to use a monospace font for this to work. Which might not be something you want to do.

Upvotes: 1

Related Questions