Email text will be truncated with an ellipsis on two lines

Are there alternative methods to truncate text without relying on webkit-line-clamp? I need to implement this in an email, so using it is not an option.

This is the current code snippet I am working with:

<style>
  h2 {
    line-height:1.5rem;
    max-height:3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.Lorem ipsum ...

The issue I am facing is that the ellipsis (...) does not show when the text overflows. While JavaScript might be a potential solution, given the email constraints, that approach cannot be utilized (I attempted it and encountered issues, for more information refer to Is JavaScript supported in an email message?)

Answer №1

In EMAIL HTML templates, it is not possible to clamp text bylines. However, you can limit text to one single line using CSS with the white-space: nowrap code, which has a 90.9% support among email clients. Check out more information on this attribute here.

<style>
  h2 {
    line-height:1.5rem;
    max-height:3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

If possible, it's recommended to manually edit the text or shorten the source text from API or BackOffice instead of relying solely on CSS for control in this scenario.

Answer №2

It's crucial to include the CSS property white-space:nowrap

When using this property, sequences of whitespace will collapse into a single whitespace and text won't wrap to the next line. The text will continue on the same line until a
tag is encountered.

Therefore, your code should be updated as follows:

<style>
  h2 {
    line-height: 1.5rem;
    max-height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid...</h2>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to obtain the compiled CSS for an Angular 2+ component?

Is it possible to retrieve compiled CSS (as a string) from an Angular2+ component? @Component({ selector: 'test-graph', templateUrl: './test-graph.component.html', styleUrls: ['./test-graph.component.scss'] }) export cla ...

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

Troubleshooting Angular 2 ng-if issues

Is there a way to dynamically apply CSS styles to an element that has an ng-if condition, even if the condition fails? It currently works fine when the condition is true, but I'm looking for a solution that allows me to modify the element regardless o ...

The HTML image tag is malfunctioning on a Windows system

I'm currently updating an HTML page and trying to add an image using the img tag. <img src="file:///C:/wamp/www/images/Sat.png" class="img-circle" alt="User Image"/> However, it doesn't seem to be working! ...

A pair of buttons and text with varying alignment

Here is the code from my popup.htlm file: HTML <body> <select style="width: 100%;" multiple id="HLSlist"> </select> <span style="display:inline"> <button type="button" id="Deletebut">Delete</button> ...

Creating a cutoff with CSS: A step-by-step guide

Is there a way to create something similar using only CSS? https://i.stack.imgur.com/N9c6W.png I have no clue on how to achieve this. Any assistance would be greatly appreciated. ...

Exploring ways to incorporate or eliminate animations on mobile devices using html/css

Is it possible to control animations on different devices using media queries? For example, can you show an animation only on mobile devices while hiding it on desktop or laptop? Conversely, is there a way to add an animation specifically for mobile device ...

What is the best way to insert a new row into a table upon clicking a button with Javascript?

Hi everyone, I'm facing an issue with my code. Whenever I click on "Add Product", I want a new row with the same fields to be added. However, it's not working as expected when I run the code. Below is the HTML: <table class="table" id="conci ...

Personalized Django Sign-in

I am having difficulty accessing the password that needs to be transferred from my form. I need help figuring out where I might be making a mistake. I am looking to create a custom login page because I want to change how usernames are input. For now, I hav ...

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...

Allow for separation amongst my cellular components

I have a table with multiple cells and I would like to add some spacing between each <td> element. You can find an example of my code on JSFIDDLE. .line { border-bottom:1px solid black; } .textRotation { -webkit-transform: rotate(-90deg); ...

Transferring information to an Ionic 5 custom element label

In my ionic 5 app, I have a side menu and tabs. Each page can have different contents for the side menu and the tabs. Instead of duplicating the ion-menu in each page, I created a header component (and one for the tabs) as follows: HEADER COMPONENT: <i ...

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript

I created a table to display leave details of employees with sorting options from date to date. Now, I need to include buttons for exporting the data to Excel and PDF formats. Check out the code below: <form name="filter" method="POST"> <in ...

Updating View in Angular 2 ngClass Issue

I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller: @Component({ selector: 'show-hide-table', template: ' <table> <thead> ...

What is the process for executing an external exe file in Node Webkit?

As a newcomer to working with Node Webkit, I am struggling to run an exe in my web app. Even a simple task like opening Notepad using 'child_process' is proving to be a challenge. Despite looking at examples online, I can't seem to get notep ...

The React Material UI table is having trouble stretching to fill the space

Currently, I am experimenting with developing my own virtualization technique using a different approach than react-virtualized. However, I am encountering difficulties when it comes to styling. I have come across an issue where the material table in the ...

Exploring JqueryUI tab navigation with the help of the <a> tag

I have come across several articles mentioning the possibility of navigating JqueryUI tabs using a button or anchor tag. Here is the method I am currently using: $("#vtabs").tabs(); $("#tabsinner").tabs(); $(".changeTab").click(function() { alert("as ...

AngularJS selectChosen does not have built-in support for translation

<select chosen options="myOptions" ng-model="StatCode" data-placeholder="{{'PleaseSelect' | translate}}" ng-options="item[0] as item[1] + ' / ' + item[0] for item in myOptions" required>< ...

Achieve scrollability for right column (div) using Tailwind CSS

I am having trouble getting the content in the right column to scroll vertically. Can someone please help me identify what I'm doing wrong here? <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/> < ...

What are the security risks of evaluating user-supplied strings in web browser storage?

I'm in the final stages of developing a script that creates an API for performing storage operations across various web browser storage technologies. Currently, I am focusing on adding conditional retrieval and removal functionalities. These features ...