如何让Link与IconButton始终保持在同一行显示？

给你几个靠谱的解决办法，保证图标不会单独占一行：

方法1：用容器绑定文本和图标 #

把Link和图标按钮塞进同一个容器，设置white-space: nowrap，让它们永远绑定在一起不拆分：

<>
  <span style={{ whiteSpace: "nowrap" }}>
    <Link>cat dog cow pig owl rabbit hare wolf fox</Link>
    <IconButton><EditIcon/></IconButton>
  </span>
</>

这样不管容器宽不宽，要么两者并排显示，要么文本换行后图标紧跟在最后一行末尾，绝对不会单独占一行。

方法2：插入非换行空格（补空格用） #

要是需要在文本和图标之间加空格，又不想空格被换行拆分，直接在JSX里插Unicode非换行空格就行：

<>
  <Link>cat dog cow pig owl rabbit hare wolf fox</Link>
  {"\u00A0"}
  <IconButton><EditIcon/></IconButton>
</>

不过这个方法只管空格不换行，要是文本太长本身会换行，图标还是可能被挤下去，所以最好和方法1搭配用。

方法3：Flex布局优化（适合已经用flex的场景） #

如果你本来就用flex布局，给父容器设flex-wrap: nowrap，同时让Link可以换行：

<>
  <div style={{ display: "flex", flexWrap: "nowrap", alignItems: "center" }}>
    <Link style={{ flex: 1, whiteSpace: "pre-wrap" }}>cat dog cow pig owl rabbit hare wolf fox</Link>
    <IconButton><EditIcon/></IconButton>
  </div>
</>

这样Link会占满剩余空间，文本该换行就换行，图标始终跟在最后一行对齐，不会单独跑一行。

内容的提问来源于stack exchange，提问作者GRZa