Display email address in a concise manner

Managing user information in my project involves capturing both username and email address.

While the username is optional, the email address is mandatory with a maximum length of 100 characters. My issue arises when the email address exceeds 60 characters, as it either needs to be displayed on two lines or the display space for the email ID field should be increased. I aim to showcase this email next to a placeholder image.

To address this problem, I have utilized jQuery by implementing the following code snippet:

$(document).ready(function(){
        $(".Email").each(function(){
            //alert($(this).text().length);
            if($(this).text().length > 55){
                $(this).css("margin", "-22px 0 0 59px");
            }
        });
    });

Answer №1

If you want to achieve this using only CSS, you can do so by giving the container element of the email address a specific width and applying the property word-wrap: break-word.

.email-container {
  width: 200px;
  word-wrap: break-word;
}
<div class="email-container">
  johnsmithexampleexampleexampleexampleexample@example.com
</div>

Answer №2

If you want to truncate overflowing text, you can use the text-ellipsis technique. Simply add the "truncate" class to your email element like this:

CSS

.truncate {
    width: 175px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Check out this demo:

.truncate {
  width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="truncate" contentEditable="true"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b22342e293e363a3237283f283f283f283a313f333130283a333f3031283a33303f311b3c363a323775383436">[email protected]</a></div>

You can also achieve this with a simple JavaScript function:

function shortentext(txt, maxLength) {
    var ret = txt;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

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

Utilize the object's ID to filter and display data based on specified criteria

I retrieved an array of objects from a database and am seeking to narrow down the results based on specific criteria. For instance, I want to display results only if a user's id matches the page's correct id. TS - async getResultsForId() { ...

What is the best way to apply styles based on specific screen widths while still having default styles for other screen sizes?

Here is the code snippet I am working with: <TableCell sx={{ borderBottom: { xs: 0, lg: 1 } }}> <Typography variant="body2">{account.name} ({account.currency})</Typography> </TableCell> I am facing an issue where the ...

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

What is the best way to disable the click function for <a> tags that have a specific class?

I am dealing with parent navigation items that have children, and I want to prevent the parent items from being clickable. Here is an example of how they currently look: <a href="parent">Parent Item</a> Is there a way to select the <a> ...

Customizing Bootstrap Navigation: Creating Space Between Menu Items

I've configured my Bootstrap navigation with a dropdown toggle for "Coverage". I'm looking to decrease the spacing between each list item (li) under this dropdown. What CSS setting should I use to achieve this? Interestingly, when I apply float: ...

Styling in Svelte/TS does not change when applied through a foreach loop

I've been experimenting with creating a unique "bubble" effect on one of my websites, but I'm facing difficulty changing the styling in a foreach loop. Despite no errors showing up in the console, I'm at a loss as to how to effectively debu ...

Troubleshooting issues with the 'date' input type feature on mobile devices

When I use the following code: <input type='month' ng-readonly='vm.isReadonly' required min="{{vm.threeMonthsAgo}}" max='{{vm.oneMonthAhead}}'/> I am experiencing some difficulties on mobile devices that do not occur o ...

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

Expanding the size of select dropdown in Material UI to accommodate more options

Is there a way to increase the width of the drop down to 400px? I tried adding inline styles, but it didn't work. Upon debugging, I realized that the width is being overridden by this class. I'm not sure how to overwrite it. Could you please prov ...

What is the proper way to disable asynchronous behavior in JavaScript?

Can someone provide assistance on how to make the following jQuery ajax function asynchronous in this code? $.post(base_url+"search/questionBox/"+finalTopic+"/"+finalCountry+'/'+findSearchText+'/'+ID,function(data){ if (data != "") { ...

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

Unable to load the page due to an error

On my jQuery Mobile page, I have a script that calls an insert script (untitled.asp) for data insertion. However, when I click the submit button, it gives me an error saying "error loading page" and doesn't work. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

Align the present domain using XPath

Is there a way, possibly with a newer version of XPath, to make the following code work: //a/@href[not contains("DOMAIN OF THE CURRENT PAGE")] The DOMAIN OF THE CURRENT PAGE should function as a variable that retrieves the domain - similar to something l ...

Challenges arising when transferring data from Django to HTML

I am trying to calculate the sum of elements in lista[] which consists of decimal numbers, but I keep getting this error message: lista[] is composed of decimal numbers ValueError at / argument must be a sequence of length 3 This is my code : views.py ...

Discover the power of catching Custom DOM Events in Angular

When working with an Angular library, I encountered a situation where a component within the library dispatches CustomEvents using code like the following: const domEvent = new CustomEvent('unselect', { bubbles: true }); this.elementRef.nati ...

Learning the ins and outs of HTML5 and CSS3

Does anyone have recommendations for high-quality HTML5 and CSS3 tutorials? ...

I want the name to be retained in storage to prevent the item from being mistakenly renamed when deleted based on its index

After pressing the "add layer" button in the box shadow generator, a new layer is added. For example, let's say I have added 3 layers (Layer 1, Layer 2, Layer 3) and then deleted Layer 2. After deletion, the remaining Layers are Layer 1 and Layer 3, b ...

Restrict printing loops within the designated division layer

Is there a way to limit the number of rows displayed horizontally when using foreach? I only want to display 7 rows. Can this be achieved with CSS or pagination? Here is an image illustrating the issue: https://i.sstatic.net/yJx3N.png Currently, it print ...

Bootstrap 5 does not currently support the use of maxlength and minlength attributes

I've been attempting to set a maxlength and minlength for an input in Bootstrap 5, but it doesn't seem to be working. Can you help me troubleshoot this issue? Here's the code: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-c ...

What could be causing the distance between the image and the navigation bar?

Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text ...