[TextField] Long hint does not work with { whiteSpace: 'nowrap', textOverflow: 'ellipsis' }

[comerc]

      <TextField
        id="PostFormSourceLink"
        floatingLabelText="Source Link"
        hintText="For example, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=1"
        fullWidth={true}
        hintStyle={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
      />

Versions

• Material-UI: 0.17.1
• React: 15.4.2
• Browser: Chrome 52

[oliviertassinari]

We have been porting the component on the next branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.

[ilovett]

hintStyle={{
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  width: '100%',
  overflow: 'hidden'
}}

[lamqson]

Hi, I don't think the issue has been fixed it yet. Could you re-open?

[eyerean]

Facing a similar issue with the placeholder in TextField, in Chrome and Edge. Long text is cut but the ellipsis is not displayed. In Firefox it works as expected.

[kylane]

Same here.

[JG145]

Same here

[xmatusk3]

My solution to this was to overwrite mui theme in a custom theme.json. I used css provided by @ilovett with a small tweak because of a our heavy usage of outlined inputs where the padding of the outlined element had to be substracted. Also icons at the end of the text field (for example down carets in selectors or calendar icon in date picker) have some extra width so I substracted 20px for the padding and 30px for the icon to make everything fit. Many text inputs use label shrinking where the label is put on the top of the input in a shrunk style - therefore the custom css has to be removed there.

{
  "overrides": {
    "MuiInputLabel": {
      "root": {
        "width": "calc(100% - 50px)",
        "white-space": "nowrap",
        "overflow": "hidden",
        "text-overflow": "ellipsis"
      },
      "shrink": {
        "width": "unset",
        "white-space": "unset",
        "overflow": "unset",
        "text-overflow": "unset"
      }
    }
  }
}

[oliviertassinari]

@xmatusk3 see #12255 for the overflow issue with the label. This issue is about the placeholder (from what I understand)