Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically?

CLICK HERE

<Stack
  sx={{
    maxWidth: "330px"
  }}
>
  <Tooltip
    title={<Typography variant="body1">{cardTitle}</Typography>}
  >
    <Typography
      variant="h3"
      sx={{
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        width: "100%"
      }}
    >
      {cardTitle}
    </Typography>
  </Tooltip>
</Stack>
cssreactjsmaterial-ui

Answer №1

If you want to ensure that your flex-box layout works correctly, make sure to include overflow: "hidden" in the sx property of both your Stack component and its child div elements. Instead of using maxWidth, consider implementing the following changes:

sx={{
  maxWidth: "330px"
}}

In order to update your code effectively, replace the existing section with the new code snippet provided below:

<Stack
  gap={2}
  sx={{
    p: 2,
    flexDirection: "row",
    "& > div": {
      "&:first-of-type": {
        flex: "1 1 35%"
      },
      "&:last-of-type": {
        flex: "1 1 65%"
      }
    }
  }}
>

Ensure to include these updates in your code for proper functionality. For a practical demonstration, feel free to check out this live example on CodeSandbox.

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

Interacting between various components in separate files using React.js

Creating a page using React involves two Components with different functions. The first component, ProfileFill, is responsible for capturing form data. On the other hand, the second component, ProfileFillPercent, which resides in a separate file, calculate ...

javascriptreactjs

"Troubleshooting: Why is the onError event not triggering

Has anyone else experienced issues with using a third-party API to fetch YouTube thumbnails with higher resolution, sometimes resulting in a code 404 error? I've been trying to replace the image source with a default YouTube thumbnail retrieved from i ...

javascriptreactjsimage

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Issue with ReactJS not applying classes based on conditions

I'm currently working on toggling a class on an element when a user clicks. However, I am facing an issue where my code only sets the class for a single element and does not refresh for subsequent clicks. Even though the set class is not being removed ...

cssreactjsreact-nativereact-reduxmaterial-ui

Viewing queries in Next.js using Apollo Client on Page.jsx

I need assistance with displaying my Graphql query on my page.jsx. The page contains individual content. Here is how my query looks: query NewQuery($slug: String!) { pageBy(id: "", pageId: 10) { id } postBy(slug: $slug) ...

reactjsnext.js

What is the best way to incorporate {Quill} into a Next.js project? Alternatively, how do I include an hr tag in the Quill editor when

click here to view image Issue with my code Hello, I am trying to customize the Quill editor by adding a Divider feature. However, I keep encountering an error when I use {Quill}. Any suggestions on how to resolve this issue? Below is the code snipp ...

reactjsnext.jsquill

Avoid using CSS browser prefixes when selecting plugins or addons

I tried searching on Google for a solution, but I couldn't find anything! Is there a trick or library available to avoid repeating CSS extensions for browsers? Instead of using -webkit-, -moz-, and -o- prefixes? -webkit-animation: NAME-YOUR-ANIMATI ...

jquerycss

Rename multiple files in bulk

With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...

javascriptphphtmlcss

Tips for creating a dynamic animation: How to make a div fall from the top and rotate

Hey everyone, I'm working on creating an animation where a phone falls from the top and then rotates and skews to give the illusion of a 3D shape when it reaches the bottom. However, I'm facing an issue with flickering in the animation when it hi ...

htmlcss

Why does the Element.style.left property keep rejecting my input value?

I have encountered a problem with the positioning of elements, specifically with the 'left' property. I've designed a rectangular block using CSS and rotated it by 0.17 radians in JavaScript. Now, my aim is to make the block move diagonally ...

javascripthtmlcss

Configuring the React Typescript router to support username-based URLs should be done in a way that does not cause conflicts with other routes

I am looking to display a user's profile on a URL format such as www.domain.com/<userName> and load the component ShowProfile. I want to ensure that terms is not mistaken for a username, so if I visit www.domain.com/terms, I do not want to load ...

reactjstypescriptreact-router-v4

Modifying the appearance of a CSS element with jQuery: Step-by-step guide

The code I have is as follows: $('.signup-form-wrapper').css("style", "display: block"); $('.login-form-wrapper').css("style", "display: none"); I'm not sure why it's not working. The current appearance of ...

javascriptjquerycss

What is the best way to ensure that all elements on an HTML webpage stay centered regardless of zoom level?

My HTML and CSS skills are not at an expert level. Despite my best efforts, when I zoom in on the webpage I created, certain elements like the logo and language switcher appear broken. I'm unsure how to address this issue. Can someone please provide m ...

htmlcss

Ways to modify the gap between buttons using CSS

I am faced with a design challenge on my home page. I want to add some spacing between the buttons so they are not too close to each other, but for some reason margin-top and margin-bottom properties are not working as expected. Can you help me figure out ...

htmlcss

Flexbox alignment issue: Text is not vertically centered

I'm facing an issue with centering my content vertically. Upon inspecting the divs, I noticed some empty space below them that seems to be causing the problem. When I tried adding <line-height: 3> in the dev tool styles, it seemed to center prop ...

htmlcssflexbox

Can the navbar hamburger in Bootstrap be displayed at a screen size of 992px?

How can I display the bootstrap navbar Hamburger at md(992px) Screen? Here is the code snippet I am currently using: https://i.sstatic.net/OqBTQ.png Any suggestions on what steps I should take? ...

htmlcssbootstrap-4

Utilizing Material-UI TextField with targeted onChange event handler

I wrote a function that iterates through an array of objects and creates material-ui TextField elements based on the information provided. The goal is to display an error message if the user inputs characters exceeding the defined maxLength. I want the er ...

javascriptreactjsreact-reduxmaterial-ui

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

I am currently experimenting with NextJs and Tailwinds CSS for a new project. However, I keep encountering an error when attempting to apply a custom background color: Failed to compile ./styles/globals.css:7:12 Syntax error: /Users/anishkunapareddy/Deskto ...

cssreactjscolorsnext.jstailwind-css

Incorporate text onto an image using Semantic UI

Currently, I am utilizing Semantic UI to display images. While it is functioning well for me in terms of adding text near the image, I desire to have the text positioned on top of the image. Ideally, I would like it to be located on the lower half of the i ...

javascripthtmlcssreactjssemantic-ui

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation