Any ideas on how to achieve a text overflow effect with css?

Is there a way to create a text overflow effect?

I'm currently displaying information in an MUI Card with a fixed width. Below is the code snippet:

cardContent: {
    fontWeight: 700,
    color: "#0E0E0E",
    fontSize: "16px",
    lineHeight: "24px",
},
cardComment: {
    fontWeight: 400,
    color: "#0672CB",
    fontSize: "16px",
    lineHeight: "24px",
    textDecoration: "underline",
    width: "100px",
    "&:hover": {
        color: "#0672CB",
        textDecoration: "underline",
    },
},

...
<Typography className={classes.cardContent}>
    Comment: <a className={classes.cardComment}>{group.SizingComments}</a>
</Typography>

https://i.sstatic.net/ETmfO.png

cssmaterial-ui

Answer №1

.cardContent {
  display: flex;
}

.cardComment {
  width: 180px;
  /*Ensure to specify width here*/
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
<div class="cardContent">
  Comment:<a class="cardComment" href="javascript:void(0);">Beginning of the comment with some example text</a>
</div>

  • To see the effect of text-overflow:ellipsis, simply add the following CSS to the .cardComment class and set a specific width.
.cardComment {
      width: 180px;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
}

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

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teache ...

javascripthtmlcss

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...

cssangulartypescript

Alter the td styling depending on the value using AngularJS

I need to dynamically change the style of each td in a column based on its value. There are five different statuses, so each status should have a unique border-color and font-color assigned to it. How can I achieve this using Angular script without hard-co ...

cssangularjshtml-table

Innovative Inter-Browser Link with a Distinct Shape

I am currently developing a web application that enables users to input content and then send it out to their phones. Everything is working smoothly, but I am facing an issue with the logo design. The logo in question is displayed as follows: On the left ...

javascriptjqueryhtmlcssimage

What is the best way to change the color of the floating label text to black in material-ui V1

I'm looking to customize the default color by using withStyles in order to change it to black rather than the primary/error color. However, I've noticed that this capability seems to have disappeared since updating from 0.19.0 to beta 1. ...

material-ui

Toggle the visibility of divs using jQuery for easy filtering

I am looking to enhance my filtering system by allowing users to apply and view multiple filters simultaneously. For example, I want to be able to select 'High' and 'pizza' filters and see the results that match both criteria. Currently ...

javascriptjqueryhtmlcss

Tips for effortlessly enlarging an element

When you click on "#sidebarnav>li", the following happens: 1) The second child of it - <ul> element will expand and its class toggles between "collapse" and "collapse in". 2) "#sidebarnav>li" will receive the "active" class. 3) The "aria-ex ...

javascriptjquerycss

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

Two issues are currently troubling me. First off, I am facing a challenge with an animation feature that I need to modify within the "popup" class for a gallery section on a website. Currently, when users load the page, a square image and background start ...

javascripthtmlcss

To modify the background of a text, simply click on the image

I recently discovered a helpful hack in an answer on this website, which allows an image to be resized when clicked using the checkbox method. I have successfully implemented this feature but encountered an issue when trying to apply a CSS style change to ...

htmlcssonclick

Access HTML content including styles using Angular

I have created an Angular application and I am looking to extract the html of a template from a large component, including the styles applied to the classes used. Can anyone advise on how to achieve this in Angular? Currently, I am attempting to use the fo ...

javascripthtmlcssangular

I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here Seeking gui ...

cssresponsive-designresponsiveweb-frontendresponsiveness

The navigation bar widens, then promptly shrinks back

When I click the hamburger icon, it changes to the close icon, and my navbar briefly expands before collapsing back. The same issue occurs when I click the close button, with the nav items briefly becoming visible. I have included my CSS for mobile widths ...

htmlcssbootstrap-4togglenavbar

Position the table next to the textarea using HTML

Incorporating both a textarea/button and a table within the body of my page, I face an issue where the table fails to expand to match the div's full height despite aligning it next to the textarea/button. Attempts to set its height using various attri ...

javascripthtmlcssbootstrap-4

Troubleshooting: Why Is My Bootstrap 5 Mobile Navigation Bar Not Expanding

As I embark on creating my very first webpage, I wanted to incorporate a responsive navigation bar using Bootstrap 5. Initially, everything was working perfectly until suddenly, the navigation bar stopped functioning properly. While it functions as intende ...

htmlcssnavbarbootstrap-5

Utilizing Reactstrap to design a customized vertical login page and NavBar with a unique background and text color scheme

I am currently working on creating a login page for accessing the main site that features a NavBar. I am utilizing ReactStrap, but I am facing challenges in making the NavBar vertical instead of horizontal, as well as customizing the background, text color ...

javascriptcssreactjsbootstrap-4reactstrap

Bulma - The Inline Imperative of Button Class

I recently started using Bulma and have been experimenting with creating a basic webpage using it. I've encountered an annoying issue where the "button is-large" class seems to be making elements on my page display inline. Below is a simple demonstr ...

htmlcssbulma

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

htmlcssgoogle-chrome-devtools

What is the best way to shift <p> slightly to the left using css?

I've created an HTML file structured like this. <html> <head> </head> <body> <div class="final_time"> <p class="final_time_text">some text here</p> </div> </b ...

htmlcss

Excessive indentation detected within the website's formatting

There seems to be an issue with the mobile version of the website, possibly related to flexbox, SVG, or width settings that are unclear to me. Inspecting with Devtools reveals indents from the SVG and text itself. Check out the website here My goal is to ...

cssflexboxwidthbootstrap-5

Safari browser experiencing issues with JQuery Slider functionality

I am facing an issue with a slider that works perfectly in all browsers except Safari. I have been struggling to figure out the root cause of this problem. You can view the fiddler code here: http://jsfiddle.net/sjramsay/UyvvL/ It appears that when the co ...

jquerycssslider