0

I'm looking for solution to shortening paragraph in HTML

Let's say I have a paragraph <p>This is some text</p> Now what I want to know is how can I make this paragraph show less lines. For example instead of showing full paragraph it shows only first 4 characters which results in <p>This</p>

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
karlo292
  • 15
  • 3
  • 2
    What do you mean by "only show the first 4 characters" - because this question is only tagged as `html`, the solution here is to edit the HTML to only contain `

    This

    `. But I assume you're trying to do something like this in JavaScript or server-side rendering instead, in which case we'd need more information about what you've tried so far and what isn't working. If this `p` tag won't contain any other HTML tags, you could use https://stackoverflow.com/questions/1301512/truncate-a-string-straight-javascript for example.     – WOUNDEDStevenJones Feb 03 '23 at 20:31
  • Otherwise, if you want the full text output to the DOM but only want to visually show the first x characters, you could use CSS https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow. Though that's not specific to the number of characters, rather the width of the element. – WOUNDEDStevenJones Feb 03 '23 at 20:34
  • Do you mean to shorten in like that when displayed in a browser or inside your code editor (IDE) ? – TheVSDev Feb 03 '23 at 20:42

1 Answers1

0

I think you're looking for something like this: https://jedfoster.com/Readmore.js/

If you wanted to do it manually just store the text in globably js variable like:

var pText = "Some really long text that you want to shorten or lengthen on a click";

   $(".showMore").toggle(function() {
        //full text case
        $(".myParagraphElement").html(pText);
        // collapsed case, replace 50 with the number of characters you want
        $(".myParagraphElement").html(pText.substring(50));
    });
Joseph Hamilton
  • 435
  • 2
  • 7