使用 display: flex 时如何使文本从换行开始而不是超过 div

Question

差不多就是标题。如果 div 中的文本大于 div 宽度，我该如何停止换行？

我也在使用 display: flex，因为这是我发现我可以将文本垂直和水平居中在 div 中间的唯一方法这是我的代码：

#front {
  position: relative;
  background-color: #121212;
  color: #e6e600;
  border: 3px solid #e6e600;
  border-radius: 10px;
  width: 500px;
  height: auto;
  min-height: 400px;
  margin: 0 auto;
  padding: 30px;
  font-weight: bold;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="front"> 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>

这是我在 chrome 浏览器中得到的：

编辑：原来问题是因为我只用了一个词。请忽略此问题

Answer 1

我为这个问题做了一个代码片段。我将您的盒子放入容器中，将您的文本放入 flex 中。如果在 flexbox 中溢出（我转 overflow:hidden），命令“overfolw-wrap:break-word”会打断句子。

希望这对你有用。 :)

-诺尔

#front {
  font-weight: bold;
  overflow: hidden;
  overflow-wrap: break-word;
}

container {
  position: relative;
  background-color: #121212;
  color: #e6e600;
  border: 3px solid #e6e600;
  border-radius: 10px;
  width: 500px;
  height: auto;
  min-height: 400px;
  margin: 0 auto;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<container>
  <div id="front">
    123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
  </div>
</container>

使用 display: flex 时如何使文本从换行开始而不是超过 div

How to make text start on newline instead of exceeding div when using display: flex

html

css

centering

flexbox