MUI：避免排版组件之间的换行 [英] MUI: Avoid line break between Typography components

问题描述

我希望将两个不同的排版标签应用于我的文本，但我不希望中间有换行符。

这是我拥有的：

<Typography variant="title" color="inherit" noWrap>
  Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
  Example
</Typography>

如下所示(带换行符)：

工作示例： https://codesandbox.io/s/jzmz7klzmy

如何删除换行符？

推荐答案

在显示器中换行：FLEX，它将在一行中显示。

<div style={{display:"flex"}}>
  <Typography variant="title" color="inherit" noWrap>
     Project:
  </Typography>
  <Typography variant="subheading" color="inherit" noWrap>
       Example
  </Typography>
</div>

codesandbox编辑的代码。

编辑：您可以在Example上使用style={{marginLeft:10}}来指定两者之间的间距。 如果要垂直对齐，请将flexDirection:'column'指定给Project的style。

这篇关于MUI：避免排版组件之间的换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！