1

What I want

I want to have a button with a really long label, but it gets cut off at 700px with ellipses. When the viewport is smaller than 700px, the button should fit the available space. The label can be super long but also super short, the button should always fit the content, but not longer than 700px.

My Problem

The button fits the text and at 700px cuts the text off, but when shrinking the viewport the button stays at 700px and is not shrinking with it.

My Demo

https://codesandbox.io/s/mui-testing-forked-opmp8?file=/src/App.js

I am using React and Material-UI. But this is a styling problem.

What I tried

Different variations of putting max-width, width and min-width to different containers, could not find a solution so far.

Mähnenwolf
  • 720
  • 10
  • 30
  • Does this answer your question? [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) – Fraction Jun 15 '21 at 12:43
  • @Fraction This is interesting, which I can use for later, but this does not answer my current question, because I only have one line. – Mähnenwolf Jun 15 '21 at 13:04
  • 1
    This also works for your case: https://codesandbox.io/s/mui-testing-forked-ph9qq?file=/src/App.js – Fraction Jun 15 '21 at 13:09
  • Huh. Alright, thank you for this. First time seeing `display: box` as well. After a quick research `display: box` doesn't seem to be super supported on all browser. So I have to be careful with it. – Mähnenwolf Jun 15 '21 at 13:32
  • you must use [`display: -webkit-box`](https://caniuse.com/?search=display%3A%20-webkit-box) – Fraction Jun 15 '21 at 13:45
  • I have gotten another solution with `overflow-x: hidden` which did the trick I wanted. – Mähnenwolf Jun 15 '21 at 18:25
  • 1
    Good, can you share it ? it can help other people – Fraction Jun 15 '21 at 18:43

1 Answers1

2

The answer to my question was to add overflow-x: hidden to the box. This answer was given to me by someone else, here is their demo:

https://codesandbox.io/s/mui-testing-forked-qbcnn

And here is the fixed styling pasted again:

const useStyles = makeStyles((theme) => ({
  box: {
    flex: "1 1 100%",
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    overflowX: "hidden" // <--- This is new
    // maxWidth: "100%",
    // width: "100%"
  },
  button: {
    width: "100%",
    maxWidth: 700,

    "& .MuiButton-label": {
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textAlign: "left",
      display: "block"
    }
  }
}));
Mähnenwolf
  • 720
  • 10
  • 30