Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain in its original position. How can I achieve this?

I attempted to modify the following CSS class, but unfortunately, it didn't yield the desired results.

#spandiv {
  background-color: #6B6664;
  padding: 5px;
  color:white;
  font-weight: normal;
  display: none;
}

template.html

<mat-form-field >
     <input id="inputCustomer" matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
  <p id="spandiv">{{customerName}}</p>  
     <mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;">
         <mat-option  *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
         {{customer.AccountID}} ({{customer.AccountName}})
        </mat-option>
     </mat-autocomplete>
  </mat-form-field>

https://i.stack.imgur.com/kkEpl.png

https://i.stack.imgur.com/fXfHb.png

cssangulartypescript

Answer №1

If this solution suits your needs, you can implement it using CSS styling

div {
  text-align: center;
}

p {
  background: #dea827;
  color: #fff;
  text-align: center;
  margin: auto;
  padding: 12px;
  width: min-content;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div>
  <h4>If less than or equal to 128 Characters:-</h4>
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<br>
<div>
  <h4>If More than 128 Characters:-</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt tempore dignissimos sequi, sunt quasi necessitatibus illum ipsa sapiente.</p>
</div>

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

Unable to access FireReader in Ionic 3, while Ionic 4 functions properly

After building my Ionic project on two different computers, I noticed that I received varying results. On the first computer: Ionic Info Ionic: ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.2 ...

angularcordovaionic-frameworkionic3

Using jQuery .animate() leading to erratic input movements

I am currently utilizing jQuery's .animate() feature to create a smooth animation effect on the width of a <div> element when a child <input> is in focus. Nevertheless, I'm encountering an issue where the input field jumps up and down ...

javascriptjqueryhtmlcsstwitter-bootstrap

Regex: Identifying all URLs except for those with ".js" or ".css" included

I am currently working on a project where I need to change all the links in an HTML page so that they are not clickable. However, I am having trouble finding the right Regex pattern for the following condition: href="Any_URL" except for those that contain ...

phphtmlcssregex

Encountering an ERROR during the compilation of ./src/polyfills.ts while running ng test - Angular 6. The module build

I encountered a problem in an angular project I am working on where the karma.config was missing. To resolve this, I manually added it and attempted to run the test using the command ng test. However, during the execution, an error message appeared: [./src ...

angulartypescript

When a key is pressed, apply a background color and fade out effect using JavaScript

Whenever the enter key is pressed, I want to make a red color appear briefly and then fade out quickly to create a blinking effect. I attempted adding a new class on Keypress that would transition the opacity to 0: function enterpressalert(e, text) { ...

javascripthtmlcss

Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4. I've experimented with Flexbox and CSS columns with ...

htmlcssgridaccordion

Experiencing strange behavior with floating labels in Bootstrap 5.3 on my Google Chrome browser (Version 123.0.6312.86 (Official Build) (64-bit))

Lately, I've observed an unusual behavior with BS 5.3 floating labels. Strangely, the placeholder is being displayed below the label text, which is not the expected behavior. On Google Chrome, the floating labels are appearing like this: https://i.ss ...

cssgoogle-chromebootstrap-5

Ways to identify modifications from a BehaviorSubject and automatically trigger a response according to the updated value

I am currently implementing a BehaviorSubject for managing languages in my Angular project. I am also utilizing Angular Datatables and trying to dynamically change the language displayed in the data table based on the value returned from the subscription. ...

angulartypescriptrxjsangular-datatablesbehaviorsubject

Is there a way to condense a paragraph of text without using a span or div element?

There is a common scenario where I often encounter this issue: <span> <p>hello world</p> </span> It involves reducing the width of a paragraph to fit the text, but unfortunately it leads to clutter in my HTML. Is there a way to ...

htmlcss

Trouble with CSS positioning

Styling with CSS: .one { width: 13%; } .two { width: 30%; } .three { width: 30%; } Formatting in HTML: <table> <tr> <th class= "one">Quantity</th> <th class= "two">Info</th> ...

htmlcss

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same b ...

javascriptjqueryhtmlangularjscss

Issue with calling a function to change the CSS color class of a button in Angular

Within my Angular code, I am attempting to set a CSS color for my button by calling a TypeScript function that will return the appropriate CSS class name. This is the code I have tried: <button style="height: 10%" class="getColor(days.date)">{{days ...

cssangulartypescript

Utilizing TypeScript namespaced classes as external modules in Node.js: A step-by-step guide

My current dilemma involves using namespaced TypeScript classes as external modules in Node.js. Many suggest that it simply can't be done and advise against using namespaces altogether. However, our extensive codebase is structured using namespaces, ...

javascriptnode.jstypescriptnamespacestypescript1.6

Guide to utilizing selenium for triggering Angular events (ng-click)

Attempting to invoke an angular ng-click through selenium is proving to be quite challenging. The focus lies on this particular snippet of javascript: <span class="col" ng-click="getHope(1,'pray','smile')">100%</span> This ...

pythonangularseleniumxpathcss-selectors

Receiving an error when attempting to inject the Router in a component constructor without using the elvis operator

Upon launching my app, I desire the route /home to be automatically displayed. Unfortunately, the Angular 2 version I am utilizing does not support the "useAsDefault: true" property in route definitions. To address this issue, I considered implementing th ...

angularjstypescriptangular

Is it possible to add a border to both the tbody and td

I currently have a table that is organized with tbody elements to group rows together. In order to create a grid-like structure, I applied borders to each individual td element within the tbody. However, I also desire to show that the tbodies themselves ar ...

htmlcss

When I test my jQuery scripts in jsfiddle, they run smoothly. However, they do not seem to work properly when I

My code is almost perfect, but the jQuery function is giving me trouble. It works fine in jsfiddle, but for some reason, it's not functioning in my HTML file. I don't believe extra characters are being added when copying from the HTML file. I hav ...

javascriptjqueryhtmlcss

Updating code to insert elements into an array/data structure using Javascript

Hey everyone, I'm new to Javascript and I'm trying to make a change to some existing code. Instead of just returning the count of elements, I want to add each of the specified elements to an array or list. Here is the original code from a Seleni ...

javascriptpythoncssselenium

Alert: AngularCompilerPlugin issuing warning about unexpected exit of Forked Type Checker

During development mode, I often encounter a console warning message after making code changes in my IDE: WARNING in AngularCompilerPlugin: Forked Type Checker exited unexpectedly. Falling back to type checking on main thread. The project is built on Ang ...

angularnpmangular-cliangular6

Angular2 plugin for redacting content

I'm attempting to integrate Redactor with additional plugins, but I'm encountering an issue where the counter plugin displays 0 words and 0 characters after the page has loaded. { words: 0, characters: 0, spaces: 0 } To address this pro ...

angulartypescriptredactorredactor.js