固定标签宽度以正确使用概述的输入

Question

我只是想使用带有长标签的a，但是当它太长时，尽管单词有空格，它也会跳行。

https://codesandbox.io/s/reverent-bhabha-i736y

所以基本上，看起来好像它的计算不正确，所以我想手动计算它，我试图使用标签ref，但是它不起作用。

编辑：

更准确地说，假设我们的标签是I want to do this right，对吧？ 它看起来像这样：

---I want to do         -----
|   this right              |
-----------------------------

请注意剩余的空间，这是不正确的。

何时应该：

-- I want to do this right ------
|                               |
---------------------------------

据我所知标签有空格，但是由于某些原因，它使行中断了。 请注意，这是outlined TextFields

的问题

Answer 1

您的问题是

transform: translate(14px, -6px) scale(0.75);

transform在元素计算并放置到DOM后工作。 如果您删除scale(0.75)，将会看到您的元素已占用所有可用空间。

如何解决：

删除您的transform: translate(14px, -6px) scale(0.75);并添加此代码

.MuiInputLabel-outlined.MuiInputLabel-shrink {
    transform: translate(0, -6px);
    font-size: 12px;
    margin: 0 14px;
    background-color: white;
}