Here is a unique version: "In order for a paragraph to be displayed with

<td _ngcontent-c2="" style="/* display: table-cell; *//* text-overflow: ellipsis; *//* width: 250px; *//* white-space: nowrap; *//* overflow: hidden; *//* text-overflow: ellipsis; */">"PaymentRequestDto [systemId=FZHolidays, entityId=GIYBV20180611054717483, paymentId=FZLEKS20180611054912756, currency=AED, amount=1419.18, apiOperation=null, requestType=TRAVEL, gateway=TNSPAY, transactionRef=87904, sessionId=4ba806bf-9ab7-49ad-bda7-0526e38d8601, billTo=BillToDto [firstName=sdad, lastName=adad, street=sadad, street1=null, street2=null, city=adada, state=null, postalCode=null, country=BH, emailId=null], travelDetails=TravelDetailsDto [departureDate=2018-07-10, departureTime=23:20, gmtVariation=+04:00, bookingChannel=WEB, carrierCode=FZ, flightNumber=FZ 547:FZ 548, fareBasisCode=RRBP8AE5:RRBP8AE5, passengerCount=1, completeRoute=DXB-CMB:CMB-DXB, journeyType=Return, legs=[LegDto [origin=DXB, destination=CMB, id=1], LegDto [origin=CMB, destination=DXB, id=2]]], items=[ItemDto [unitPrice=665.9709621993128, quantity=1, productCode=SERVICE, productName=FLT, productSKU=DXB-CMB:CMB-DXB, firstName=one, lastName=test, userID=1, status=Reserved, userType=Adult, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2b2d3b2c1b333f3732633f1e2a3b2d2a703d3133">[email protected]</a>, userPhone=+2134543535345, chargeDetails=[]]], threeDSecureInfo=null, ipAddress=10.1.20.128, browserAcceptHeader=null, browseUserAgentHeader=null, redirectionURL=null, locale=null, systemData=SystemDataDto [field1=AIR &amp; LAND, field2=Mahasen by Foozoo, field3=2.5, field4=260.94, field5=CMB, field6=N, field7=, field8=FZE, field9=LK, field10=null, field11=null, field12=N, field13=null, field14=null, field15=null, field16=null, field17=null, field18=null, field19=null, field20=null, field21=null, field22=null, field23=null, field24=null, field25=null, field26=null, field28=null, field29=null, field30=null, field31=null, field32=null, field33=null, field34=null, field35=null, field36=null, field37=null, field38=null, field39=null, field40=null, field41=null, field42=null, field43=null, field44=null, field45=null, field46=null, field47=null, field48=null, field49=null, field50=null], pnrDetails=null, deviceFingerprintID=null, channel=null, cyberSourceProfile=FZH, taDetails=null, paymentMethod=CARD, successURL=https://qa-bookholidays.flydubai.com/payment-capture?s=GIYBV20180611054717483&amp;locale=en&amp;d=CMB, failureURL=null, cancelURL=null, pendingURL=null, notificationURL=http://qa-sys-bookholidays.flydubai.com/AccountsManager/fzeps, contactInfo=PayerContactInfoDto [<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8aefe7ebe3e6b7ebcafeeff9fea4e9e5e7">[email protected]</a>, phoneNumber=+2134543535345], generatedOTP=null]"</td>

assume that my td content needs to be truncated with dots after every 3 or 4 characters without using any scripts.

When clicked on, a popup should display the entire text.

angularcss

Answer №1

Is this what you are looking for?

You have the ability to toggle the visibility of the text by simply clicking on it.

var element = document.querySelector(".mytd");

element.addEventListener("click", function() {
  this.classList.toggle("mytd");
})
td.mytd {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table>
  <tr>
    <td _ngcontent-c2="" class="mytd">"PaymentRequestDto [systemId=FZHolidays, entityId=GIYBV20180611054717483, paymentId=FZLEKS20180611054912756, currency=AED, amount=1419.18, apiOperation=null, requestType=TRAVEL, gateway=TNSPAY, transactionRef=87904, sessionId=4ba806bf-9ab7-49ad-bda7-0526e38d8601,
      billTo=BillToDto [firstName=sdad, lastName=adad, street=sadad, street1=null, street2=null, city=adada, state=null, postalCode=null, country=BH, emailId=null], travelDetails=TravelDetailsDto [departureDate=2018-07-10, departureTime=23:20, gmtVariation=+04:00,
      bookingChannel=WEB, carrierCode=FZ, flightNumber=FZ 547:FZ 548, fareBasisCode=RRBP8AE5:RRBP8AE5, passengerCount=1, completeRoute=DXB-CMB:CMB-DXB, journeyType=Return, legs=[LegDto [origin=DXB, destination=CMB, id=1], LegDto [origin=CMB, destination=DXB,
      id=2]]], items=[ItemDto [unitPrice=665.9709621993128, quantity=1, productCode=SERVICE, productName=FLT, productSKU=DXB-CMB:CMB-DXB, firstName=one, lastName=test, userID=1, status=Reserved, userType=Adult, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a5f594f586f474b4346174b6a5e4f595e04494547">[email protected]</a>, userPhone=+2134543535345,
      chargeDetails=[]]], threeDSecureInfo=null, ipAddress=10.1.20.128, browserAcceptHeader=null, browseUserAgentHeader=null, redirectionURL=null, locale=null, systemData=SystemDataDto [field1=AIR &amp; LAND, field2=Mahasen by Foozoo, field3=2.5, field4=260.94,
      field5=CMB, field6=N, field7=, field8=FZE, field9=LK, field10=null, field11=null, field12=N, field13=null, field14=null, field15=null, field16=null, field17=null, field18=null, field19=null, field20=null, field21=null, field22=null, field23=null,
      field24=null, field25=null, field26=null, field28=null, field29=null, field30=null, field31=null, field32=null, field33=null, field34=null, field35=null, field36=null, field37=null, field38=null, field39=null, field40=null, field41=null, field42=null,
      field43=null, field44=null, field45=null, field46=null, field47=null, field48=null, field49=null, field50], pnrDetails=null, deviceFingerprintID=null, channel=null, cyberSourceProfile=FZH, taDetails=null, paymentMethod=CARD, successURL=https://qa-bookholidays.flydubai.com/payment-capture?s=GIYBV20180611054717483&amp;locale=en&amp;d=CMB,
      failureURL=null, cancelURL=null, pendingURL=null, notificationURL=http://qa-sys-bookholidays.flydubai.com/AccountsManager/fzeps, contactInfo=PayerContactInfoDto [<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3e363a3237663a1b2f3e282f75383436">[email protected]</a>, phoneNumber=+2134543535345], generatedOTP=null]"</td>





  </tr>
</table>

Answer №2

It appears that you have already commented that line out in your code.

UPDATE: Attempting to hide overflow text while also displaying a popup is not feasible, as it will also hide the popup. Your options are either to use overflow hidden or to utilize popups. The td tag may complicate finding alternative solutions.

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

Adding a checkbox to menu items in a ReactJS application can be accomplished by utilizing specific components

I have successfully created dynamic menus using a recursive function, and they are displaying in the correct order without any issues. Requirement: My current goal is to identify the last level of menus and assign a checkbox with the value corresponding ...

javascriptcssreactjsbootstrap-4reactstrap

Encountering an error while attempting to load the jQuery script: TypeError - $.fn.appear.run is not a

I have included an animation script for CSS in my markup, but I am encountering the following error: TypeError: $.fn.appear.run is not a function Does anyone know why this is happening and how I can resolve it? /* * CSS3 Animate it * Copyright (c) 2 ...

javascriptjquerycss

Verification for collaborative element

I am currently working on creating a shared component for file uploads that can be reused whenever necessary. Interestingly, when I include the file upload code in the same HTML as the form, the validation functions properly. However, if I extract it into ...

angulartypescript

Adjust the appearance of the scrollbar with custom CSS, but be aware that the typical methods may not be effective in

I am interested in customizing the appearance of scrollbars on my website. After coming across this tutorial on W3Schools titled W3S: How TO - Custom Scrollbar, I successfully applied the changes on Chrome, but unfortunately, it did not work on Firefox. H ...

htmlcssscrollbar

CSS Menu Expansion Error in Just Two Lines

My CSS-only menu is causing some trouble by expanding to three lines whenever a submenu option on the first line is clicked. The issue only occurs with options in the middle, as it shifts everything out of place and onto another line. Expected behavior: ...

htmlcssdrop-down-menumenu

Converting a string to a Date in Angular2 using Typescript

I need to initialize a new Date object using a specific date. I have considered converting it from a particular string, like so: let dateString = '1968-11-16T00:00:00' How can I achieve this in typescript? Update: I am specifically looking fo ...

angulartypescript

The Angular Custom Material theme in Angular 18 is lacking visibility for colors

I'm facing an issue with implementing a custom theme in Angular Material 3 for Angular 18. Despite my efforts, the theme doesn't seem to be applied correctly. Initially, I tried importing and applying the theme as usual but that didn't work ...

angularmaterial-uiangular-materialmaterial3angular18

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

javascripthtmlangular

Tips for maintaining a border between divs in a bootstrap layout

I have a box positioned on the left side of the screen and a large div element placed adjacent to it. I am looking to enclose both of these elements within a square-shaped border in a light color. How can I achieve this effect? Additionally, I have include ...

htmlcsstwitter-bootstrapbootstrap-4

What could be causing the issue of my navbar text not changing color using CSS?

Despite several attempts, I am unable to change the color of the hyperlinks in blue or purple using the HTML and CSS below. Can anyone point out what I might be missing? nav ul { /* Navbar unordered */ list-style: none; text-align: center; backgr ...

htmlcsslisthtml-lists

Utilizing Pseudo Elements within the QT Designer Interface

I was attempting to add a vertical line to the left of a button with a hover effect using a pseudo-element in qt-designer styleSheet, but it was not displaying correctly. Here is the code I used: QPushButton{ position: relative; padding: 10px 20px; border: ...

cssqtqt-designer

Utilizing Jquery for deleting text content from a div element

I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...

jquerycsshtmlreplace

Troubleshooting: Jquery show effects not functioning as expected

Currently, I am facing an issue where I am attempting to display a fixed div using the show function of jQuery. Although the show function itself is working properly, when I try to include an effect from jQuery UI, it does not seem to work as expected. Bot ...

javascriptjqueryhtmlcss

What is the proper way to register ActivatedRoute, Route, and Http in Angular?

Where should Angular's libraries such as ActivatedRoute, Route, and Http be registered within the main NgModule? ActivatedRoute, Route, Http in Angular Since these are not services, pipes, or directives, they can be registered in either providers or ...

angular

What could be causing the malfunction of the dropdown menu attached to my button?

I've been working on setting up a simple button in my Angular application that should display a dropdown menu with various options when clicked. I copied and pasted some Bootstrap template code, made some modifications to match the style of my app, bu ...

htmlcssangularbootstrap-4frontend

Restricting the number of dots on a slick-slider without using jQuery

I am facing an issue where the dots in my slider keep adding up and forming multiple lines when there are more than 30-40 images. I aim to achieve a dot navigation similar to Instagram, where clicking on a dot displays the corresponding image with the acti ...

javascriptcssanimationjsxslick.js

Constant navigation bar placement

On my website, I have a fixed navigation bar at the top that I want to be transparent. However, when I apply transparency to the navigation bar, the content inside it also becomes transparent. To fix this issue, I added a relative position to the content w ...

htmlcss

Is there a way to remove the scrollbar from the menu created with react-burger-menu?

How can I remove the scroll bar from the menu created with react-burger-menu? Despite trying various CSS properties adjustments, I have not been able to achieve the desired effect. Here is an image of the open menu and the corresponding CSS: (https://i.st ...

cssreactjsnext.jsmenuhamburger-menu

Completely alter the appearance of an <img> element using CSS without modifying the src attribute

Hey there! I currently have an image in the img src="image" tag. Is there a method within CSS to completely replace that image? I am unable to modify the JavaScript or HTML. I attempted using background-image, but the original image is still b ...

css