Tips for correcting the sentence that extends beyond the boundaries of the Material UI box

Utilizing Material UI for my project...

I am trying to contain the text within a box but facing issues with responsiveness as the text is overflowing outside of the box.

Note: I have attempted various solutions from Stack Overflow such as word-wrap, max-width, min-width but none have been successful.

https://i.sstatic.net/9oAmO.png

The code snippet is as follows:

<Stack direction={'row'} spacing={2}>
    <Box color={'rgb(24, 119, 242)'}><FacebookIcon /></Box>
    <Box
        sx={{
            '&:hover': {
                cursor: 'pointer',
                textDecoration: 'underline',
            },
        }}
    >
        <Link href="#" underline="none">
            https://www.facebook.com/caitlyn.kerluke
        </Link>
    </Box>
</Stack>
<Stack direction={'row'} spacing={2}>
    <Box color={'rgb(224, 45, 105)'}><InstagramIcon /></Box>
    <Box
        sx={{
            '&:hover': {
                cursor: 'pointer',
                textDecoration: 'underline',
            },
        }}
    >
        <Link href="#" underline="none">
            https://www.instagram.com/caitlyn.kerluke
        </Link>
    </Box>
</Stack>
<Stack direction={'row'} spacing={2}>
    <Box color={'rgb(0, 126, 187)'}><LinkedInIcon /></Box>
    <Box
        sx={{
            '&:hover': {
                cursor: 'pointer',
                textDecoration: 'underline',
            },
        }}
    >
        <Link href="#" underline="none">
            https://www.linkedin.com/in/caitlyn.kerluke
        </Link>
    </Box>
</Stack>
<Stack direction={'row'} spacing={2}>
    <Box color={'rgb(0, 170, 236)'}><TwitterIcon /></Box>
    <Box
        sx={{
            '&:hover': {
                cursor: 'pointer',
                textDecoration: 'underline',
            },
        }}
    >
        <Link href="#" underline="none">
            https://www.twitter.com/caitlyn.kerluke
        </Link>
    </Box>
</Stack>

Answer №1

If you want to deal with overflowing text, consider using the Text overflow css property:

 <Box
      sx={{
        "&:hover": {
          cursor: "pointer",
          textDecoration: "underline"
        },
        overflow: "hidden",
        textOverflow: "ellipsis"
      }}
    >
      <Link href="#" underline="none">
        https://www.facebook.com/caitlyn.kerluke
      </Link>
    </Box>

To see a live demonstration, click here: https://codesandbox.io/s/elated-gauss-09yww7?file=/src/App.js

For more information, consult the official documentation: https://mui.com/system/display/#text-overflow

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

Having trouble adjusting the right-hand edges of form elements when using percentage widths

Simply put, the issue is this: Why doesn't the second row of elements, with widths of 35% and 55%, take up the same amount of the page's width as the first form element which uses 90%? I often have to adjust the percentages differently dependin ...

React, Redux, Thunk - the trifecta of powerful

After spending a considerable amount of time struggling with this particular piece of code, I have scoured online resources such as Stack Overflow and the documentation, but there is still something that eludes me... The code in question revolves around t ...

Incorporating the Crypto-js library into an Express application

I’ve encountered an issue while working on a user registration and login system where I am unable to encrypt the data successfully. Below is the Express code snippet: var express = require("express"); var router = express.Router(); var mysql = require ...

Trouble with Fancybox 2 and CSS classes not applying correctly

Despite my previous successful experiences with fancybox, I am currently facing an issue where the CSS styling is not being applied as expected. The large images appear grouped correctly, but without any styling, causing them to shift to the right after ap ...

What is the process for configuring environment variables in a React application?

I have set up my React app to run on http://localhost:3000, and now I am looking to configure environment variables for different environments such as development, production, staging, and local. These are the URLs for my React app in various environments ...

JSON endpoint in Express route experiencing timeouts

I am relatively inexperienced with Node, React, and Express, although I have previously deployed a React application with a Node server successfully. This time, however, I am deploying on AWS for the first time and encountering some differences compared to ...

Steps to eliminate a horizontal scrollbar

It appears that I am working with CSS 2.1 as the style "overflow-x" is not present in my code. In the snippet below, I have defined headings for a grid and set the Id "pageLength" to introduce a vertical scrollbar for the grid's contents. However, thi ...

Allowance for text overflow on subsequent line

Below is the snippet of HTML code I am working with: <h4 class="clickbelow">This is a very long line that overflows onto a new line when the width is small.</h4> Here is the CSS that I have implemented: .clickbelow:before { content: url( ...

Customizing Bootstrap modal backdrop with CSS

I'm exploring how to achieve the backdrop effect of the Bootstrap modal without actually having to load a modal. However, I'm struggling to make it work correctly. Can anyone provide insight into the CSS that the Bootstrap backdrop utilizes inter ...

What exactly constitutes an excessive amount of information stored within the state of a React component?

As I develop my app, I'm creating a dashboard that showcases numerous statistics. The information is retrieved using an API and kept in the state of my component (without using Redux at this point). With over 100,000 small data entries being loaded an ...

What is the best way to shorten string values that exceed a certain length?

Here is an array list I have: $myarray = array( array( 'name' => 'File name 1 - type.zip', 'size' => '600KB', ), array( 'name' => 'File name 2 - type.pdf&a ...

How can you leverage the power of useState in a custom React hook?

Here is a code snippet for a custom hook I created: const useShowBg = () => { const [showBg, useShowBg] = useState(false); return [showBg, useShowBg]; }; export default useShowBg; In my component, I import and use the custom hook like this: im ...

How to fix JSS keyframes not responding to prop changes

I am currently working on a Spinner component, which essentially functions as a loading icon. My goal is to enable customization by passing props to the JSS styles. However, I have encountered an issue where the animations fail to work when I pass props to ...

What is the best way to delete a parent table row in React JS when the child "delete" button is clicked?

Struggling with hiding a table row in my React JS app upon clicking the "delete" button. The functions causing issues are: ... changeHandler: function(e) { ... }, deleteHandler: function(e) { e.currentTarget.closest("tr").style.visibility = "hidden"; } ...

On iPhone, links located under a fixed-positioned div can be easily clicked

I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area. Footer CSS: .footer { position: fixed; bottom: 0; right: ...

Tips for applying/styling "All Items Center" and "Space Between Items" in CSS and ReactJS

justify-content: space-evenly; seems to be working correctly, but the desired output is not achieved I am aiming for something like this: https://i.stack.imgur.com/iQoWK.png However, this is what I currently have: https://i.stack.imgur.com/1PxGR.png ...

What sets apart the "+" and "~" selectors in CSS?

I've tried using both of these selectors, but I'm having trouble distinguishing between them. It appears that they are functioning in the same way. There must be a difference that I'm overlooking. ...

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

What could be causing the Navbar Collapse feature to malfunction in my Bootstrap setup?

Hey there, I'm facing an issue with the Bootstrap navbar collapse button not working. I've tried everything, followed all the steps in a tutorial, but still can't get it to function properly without altering the Signup and Login buttons. Ca ...