Although Angular allows for CSS to be added in DevTools, it seems to be ineffective when included directly in

Looking to set a maximum length for ellipsis on multiline text using CSS, I tried the following:

.body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

However, this approach did not work. Interestingly, when setting the style via Chrome DevTools on the selected element (element.style {}), it does work.

Not Working:

enter image description here

Working:

enter image description here

Upon inspection, it appears that styles are added in both cases, but for some reason -webkit-box-orient: vertical; is not added in the first one.

Any suggestions or help would be greatly appreciated.

cssangular

Answer №1

Autoprefixer eliminates unnecessary prefixes that are outdated. Give it a shot to prevent styles from being removed.

.body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
   /* ignore the following autoprefixer rule */
  -webkit-box-orient: vertical;
}

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

How to prevent jQuery from continually recalculating width on window resize?

Here is the code I've been working on: http://jsfiddle.net/7cXZj/ var callback = function () { $('.progress-bar').width($('.progress-bar').parent().width() - 190); $(".mainpart-background").animate({ width: "80%" }, 80 ...

javascriptjquerycssjquery-animate

Is it possible to utilize checkbox images for type="checkbox" in ng-repeat with AngularJS?

Hi there, I'm currently attempting to add a checkbox image for input type="checkbox" using ng-repeat. I've styled everything accordingly, but when I apply ng-repeat, it only works for the first item in the list. Here is what my CSS file looks lik ...

cssangularjscheckbox

A simple way to retrieve data from Firebase using the unique identifier (ID)

Hello, I am attempting to retrieve the user email for each message. Each message (chat) has a user ID associated with it. I fetch the entire user data using getUser on the *ngIf directive and then display the email address. It works fine and there are no ...

angularfirebasegoogle-cloud-firestorefetch

The latest version of Angular (7.0.5) introduces a new feature where the ng new command no longer prompts the user with the question "Would

I'm looking for assistance in figuring out why I am unable to create a new project using the latest version of Angular 7. Desired outcome: ng new firebase-auth ? Would you like to add Angular routing? No ? Which stylesheet format would you like to u ...

angularnpmangular-cliangular7

Is there a way to identify the specific button that was clicked within an Angular Material dialog?

import {Component, Inject} from '@angular/core'; import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; /** * @title Dialog Overview Example with Angular Material */ @Component({ selector: 'dialog-overview-ex ...

javascriptangulartypescriptangular-materialangular-material2

CSS is being applied on Internet Explorer 11 only after a hard refresh with Ctrl+F5

While my website loads perfectly in Chrome and Firefox, I have been experiencing issues with Internet Explorer 11. The CSS is not fully applying until after pressing Ctrl+F5 multiple times. It's strange because some of the CSS is being applied but cer ...

cssinternet-explorer

Is there a way to dynamically change the height in jQuery/JavaScript?

I am encountering an issue with my embed code where the height changes randomly after a few seconds, depending on certain parameters. Here is an example of the code I am using: $( <embed></embed>) .attr("src", "http://www.bbs.com") ...

javascriptjqueryhtmlcss

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss

Fade in images using jQuery

I am having issues with fading in and out images using jQuery, it doesn't seem to be working as expected. I think there might be something crucial that I am missing. Take a look at the script below: var count = 1; setInterval(function() { ...

javascriptjqueryhtmlcss

What is the best way to remove the left margin from a MuiTreeItem-group?

I'm working with the MUI tree component and I want to remove the left margin of the second layer of MuiTreeItem-group I attempted to use makeStyles to address this issue, but it didn't have the desired effect const useStyles = makeStyles(() => ...

javascriptcssreactjsmaterial-uitree

The hover effect is implemented across all image elements

Below is the code snippet in question: #mg1 { margin-left: 3%; } #mg1:hover { margin-top: 4%; } <div id="section1"> <center> <div id="bgp"> <center> <p>THUMBNAILS</p> </center> ...

htmlcss

Adjust the baseline of the text within the <li> element by moving it 2 pixels upwards

My webpage menu is set up with inline lis within a ul. Each li has a colored border and contains an a element. I want to change the color of the text inside the a element and move it 2 pixels up when hovering over it without affecting the li border. How ...

htmlcssmenuhtml-listsmousehover

What is the best way to align my logo image and search field at the center of the page, similar to the layout of

Struggling with styling this webpage. I aim to have my logo and search bar centered on the page, surrounded by ample space above and below. You can check it out at NE1UP dot com. All I want is a Google-style layout for my page, but I'm facing difficu ...

htmlcsstwitter-bootstrap

Material Modules are causing issues with AOT compilation

I'm encountering multiple errors that all share a similar pattern: ERROR in ./node_modules/@angular/material/button/typings/index.ngfactory.js Module build failed: Error: Invalid name: "@angular/material/button" at ensureValidName (C:\path&b ...

angularangular-aot

Animating components when they first mount in React

I'm attempting to implement an onMount animation in React (and Tailwind if relevant). The code I currently have is as follows: const Component = () => { const [mounted, setMounted] = useState(false) useEffect(() => { setTimeout(( ...

cssreactjs

Error: The identifier HTMLVideoElement has not been declared

Encountering an issue while attempting to build my Angular 9 Universal project for SSR: /Users/my-project/dist/server.js:28676 Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", HTMLVideoElement) ReferenceError: HTMLVideoElem ...

angulartypescriptangular-universalreferenceerror

How do I rearrange the order of a collection in Firestore using a reference that I already have?

Is there a method to maintain a reference of the same collection while altering the ordering using firestore? TLDR: I am looking to achieve similar functionality as demonstrated in: , but since my data is sourced from firestore, I am struggling to find th ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Error message: Unable to retrieve parameter value from Angular2 ActivatedRoute

I am attempting to showcase the value of the activated route parameter on the screen, but I am facing difficulties. In the initial component, my code looks like this: <ul *ngFor="let cate of categories;"> <li (click)="onviewChecklists(cate.id) ...

angulartypescript

Trouble with CSS: struggling to remove the bullet point from the <li> tag

I have created a CSS style for the layout of my basic document: div#content li { font-size:95%; list-style-image:url(/css/bullet_list.gif); line-height:1.5; } Further down in another document, I've included a CSS file that defines .code ...

htmlcsshtml-lists

When an image is placed inside a parent div, the link should extend to the entire width of the div, rather than just hovering over

Essentially, I have a div that spans the entire width of its container, inside it is an image link. The image's width is set to adjust automatically with a fixed height of 600px. The link covers the whole width of the div, which in this case is the wi ...

htmlcssimagehyperlink