Adding the ellipsis feature
Implementation with Bootstrap:
If you are utilizing Bootstrap, you have the option to include the text-truncate class for applying an ellipsis to text. Here's how you can do it:
<span id="ellipsis-example" class="d-inline-block text-truncate" style="max-width: 150px;">
Adding an ellipsis feature to the text content.
</span>
Utilizing standard CSS:
Alternatively, you can define a custom class to implement the ellipsis effect, similar to what you mentioned in your query:
.text-truncate {
display: inline-block;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Outcome:
.text-truncate {
display: inline-block;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<span class="text-truncate" style="max-width: 150px;">
Adding an ellipsis feature to the text content.
</span>
Enabling/disabling the ellipsis effect
With vanilla JavaScript:
To toggle the class using pure JavaScript, you can do:
var element = document.querySelector("#ellipsis-example");
element.classList.toggle("text-truncate");
You may also utilize
classList.add("#ellipsis-example")
and
classList.remove("ellipsis-example")
functions to specifically add or remove the class.
For Angular users:
Given your context with Angular, you can leverage the built-in class directive to toggle the class directly in the template:
<!-- toggleEllipses is a boolean indicating ellipsis status -->
<span id="ellipsis-example" [class.text-truncate]="toggleEllipses" style="max-width: 150px;">
Adding an ellipsis feature to the text content.
</span>
Outcome:
var element = document.querySelector("#ellipsis-example");
function toggleEllipsis() {
element.classList.toggle("text-truncate");
}
.text-truncate {
display: inline-block;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<span id="ellipsis-example" class="text-truncate" style="max-width: 150px;" onclick="toggleEllipsis()">
Adding an ellipsis feature to the text content.
</span>