Fix - three dots/ ellipsis to BlogPost.vue

[vdeksne]

text-overflow: ellipsis; is not working .content-preview { max-width: 100%; /* Adjust this as needed */ height: auto; /* Adjust based on your design */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

[vdeksne]

    <p class="content-preview" v-else v-html="post.blogHTML"></p>

[vdeksne]

For multiline text truncation with an ellipsis in Vue.js, a common approach is to use a combination of CSS for basic styling and a computed property or method to dynamically shorten the text based on a specific character limit. This approach gives you more control over the number of lines and how the text is truncated.

Given the structure of your Vue component, you can add a computed property to handle the text truncation. This example will truncate the post.blogHTML content to a specified character limit and append an ellipsis if the content exceeds that limit.

Step 1: Add a Computed Property First, add a computed property to your Vue component that truncates the post.blogHTML content.

<script> export default { // Your existing component data, methods, etc. computed: { truncatedContent() { const maxLength = 100; // Maximum number of characters if (this.post.blogHTML.length > maxLength) { return this.post.blogHTML.substring(0, maxLength) + '...'; } return this.post.blogHTML; } } } </script>

Step 2: Update the Template Next, update the template to use the truncatedContent computed property instead of directly displaying post.blogHTML.

``

This approach ensures that your content is truncated with an ellipsis if it exceeds the specified character limit. Adjust the maxLength value in the computed property as needed to fit your design requirements.