Ways to display a horizontal ellipsis at the end of a paragraph

Question

Ways to display a horizontal ellipsis at the end of a paragraph

Utilizing an HTML entity to display three dots (...) is my current method of indicating that there is more text available. While CSS (text-overflow: ellipsis;) offers alternatives, I am restricted in using CSS styles.

The problem lies in the fact that the ellipsis is appearing in the middle of the text - I require it to mimic the way manual three dots appear at the end of a text like,

Many people have sent language examples over the years...

This is what I currently see:

https://i.sstatic.net/F90aK.jpg

A horizontal ellipsis

<p><span>Sample Text:</span>Many people have sent language examples over the years, but we want more! We'd love to add more examples&#8230;</p>

html css

Answer 1

Answer №1

ToolJS is a versatile JavaScript library that offers solutions to simplify your workflow.

One of its modules, the "Str" module, provides string manipulation functions, including the useful .truncate function.

Here's how you can use it:

Obtain the code from either the CDN or NPM, and follow the example below:

var Str = ToolJS.export("Str");
    
var myString = "Many people have sent language examples over the years, but we want more! We'd love to add more examples";
    
var newString = Str.truncate(myString, {
    limit: 40, // this is the number of characters you want to show in your string
    replacement: "..." // this is the replacement string
});
    
// Alternatively, you can use a shorthand implementation
    
var newString = Str.truncate(myString, 40, "...");
    
// To display it on your DOM
    
var DOM = ToolJS.export("DOM");
    
DOM.html("p", `<p><span>Sample Text:</span>${newString}</p>`);

<script src="https://unpkg.com/@redeakaa/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b4afafacaab380f1eef0eef1">[email protected]</a>/dist/umd/tooljs.min.js"></script>
<p><span>Sample Text:</span>Many people have sent language examples over the years, but we want more! We'd love to add more examples</p>

Answer 2

ToolJS is a versatile JavaScript library that offers solutions to simplify your workflow.

One of its modules, the "Str" module, provides string manipulation functions, including the useful .truncate function.

Here's how you can use it:

Obtain the code from either the CDN or NPM, and follow the example below:

var Str = ToolJS.export("Str");
    
var myString = "Many people have sent language examples over the years, but we want more! We'd love to add more examples";
    
var newString = Str.truncate(myString, {
    limit: 40, // this is the number of characters you want to show in your string
    replacement: "..." // this is the replacement string
});
    
// Alternatively, you can use a shorthand implementation
    
var newString = Str.truncate(myString, 40, "...");
    
// To display it on your DOM
    
var DOM = ToolJS.export("DOM");
    
DOM.html("p", `<p><span>Sample Text:</span>${newString}</p>`);

<script src="https://unpkg.com/@redeakaa/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b4afafacaab380f1eef0eef1">[email protected]</a>/dist/umd/tooljs.min.js"></script>
<p><span>Sample Text:</span>Many people have sent language examples over the years, but we want more! We'd love to add more examples</p>

Ways to display a horizontal ellipsis at the end of a paragraph

Answer №1

Similar questions

Implementing a jQuery method in a PHP page that is loaded through AJAX

Is there a way to stop a nested table from causing the parent table to expand?

Enhancing a bootstrap gallery with a zoom in effect

Multiple web pages utilizing Angular app/widget

Transforming external JavaScript and CSS scripts into HTML code

The issue with Selenium chromedriver is that it is failing to execute the JavaScript scripts

Restrict the number of clicks allowed on a button

Struggling with aligning text in the center of a Navbar using Bootstrap4

I am not familiar with this HTML element, it's a mystery to me

Exporting MySQL data to MS Excel is functioning smoothly on the local environment, however, it is encountering difficulties when

Steps for identifying the file format of a document with JavaScript

Initiate playing HTML video upon user click

Tips for altering text size within Angular Material form fields with floating placeholder

Instead of displaying the location attribute in an alert, populate it into a text area

Conceal elements on smaller screens using the Bootstrap 5 grid system

Is there a potential bug when using .fadeOut() within a hidden element?

Enhancing the appearance of the Switcher by framing it with

Combining a background image with a contrasting background color in email design

How can I modify the color of a div when a validation error occurs?

Controlling the HTML5 <audio>/<source> attribute using JQuery