I am currently creating a blog site and on home page, I only want 100 character of the paragraph to show.After that I want only ...(3 dots) to shown How can I do that using javascript or css? enter image description here

I want it to look like: enter image description here

I am currently creating a blog site and on home page, I only want 100 character of the paragraph to show.After that I want only ...(3 dots) to shown How can I do that using javascript or css? enter image description here

I want it to look like: enter image description here

• javascript
• html
• css
• node.js
• ejs

• you mean text-overflow ? developer.mozilla.org/en-US/docs/Web/CSS/text-overflow – Mister Jojo Commented Jul 29, 2020 at 21:16

11 Answers 11

Using Only Html & Css, you can use something like this:

p {
     width: 250px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

Here are some examples of that: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Using Javascript, you could use something like this:

function truncateText(selector, maxLength) {
    var element = document.querySelector(selector),
        truncated = element.innerText;

    if (truncated.length > maxLength) {
        truncated = truncated.substr(0,maxLength) + '...';
    }
    return truncated;
}
//You can then call the function with this
document.querySelector('p').innerText = truncateText('p', 107);

Here's an example of that: http://jsfiddle.net/sgjGe/1/

Use the javascript Substring

  <p> <%= post.body.substring(1, 100) + "..." %> </p>

<p> <%= post.content.substring(0, 100) + "..."  %> </p>

This would return 100 characters exactly, since the '100' indicates the number in the series to be excluded. The string displayed would be from 1st element (at index 0) to the 100th element (at index 99).

I'm also doing Angela's challenge. Lol!

<p> <%= post.postText.substring(1, 100) + "..." %> </p>

here, post.postText returns the paragraph String.

If you are doing Angela's Challenge this would help.

<p><%= post.content.substring(1, 100) + "..." %></p>

As this code helps me a lot I think it should help you also. keep going I'm also doing angela's challenge right now.

You can also use the following methods (assuming we are working with ejs):

1. We can use the substring() method: The substring(a, b) method extracts characters, between two indices (positions a and b respectively), from a string, and returns the substring.

   Example:

   let text = "I love javascript";
   <%= text.substring(0, 6)+"..." %> 
   

   This will display the first 5 characters between 0 and 6 of the text followed by the 3 dots: I love...

2. We can also use the slice() method: Example:

   <%= text.split(" ").slice(0, 2).join(" ") %>
   

   This will limit the string of text to 2 words separated by a space: I love.

NB: The second method is more suitable when working on elements in arrays.

Use the javascript Substring inbuilt function.

As this code helps me a lot I think it should help you also. keep going I'm also doing angela's challenge right now.

<p><%= post.content.substring(1, 100) + "..." %></p>

Use the javascript Substring and Length inbuilt functions as:

<p><%= post.content.substring(0, 100) + "..." %></p>

I use nuxt 3 And Tailwind so I need JS solution, I use this and it's work :

create JS function in script tag :

const truncatedContent = computed(() => {
const maxLength = 100
if (post.content.length > maxLength) {
return post.content.substring(0, maxLength) + '...'
}
  return post.content
})

and use the function directly between p tag <p> </p> like this :

<p class="text-gray-700 text-base">
  {{ truncatedContent }}
  <NuxtLink class="px-3 font-medium cursor-pointer text-yellow3"> اقرأ المزيد 
  </NuxtLink> 
</p>

 <p><%= post.content.substring(1, 100) + " ..." %></p>

These lines of Code Help you if you are doing Angela Ys Challenge in your home file