使用显示时如何使文本从换行符开始而不是超过 div：flex [重复]

Posted 2023-03-05

【中文标题】使用显示时如何使文本从换行符开始而不是超过 div：flex [重复]

【英文标题】：How to make text start on newline instead of exceeding div when using display: flex [duplicate]

【发布时间】：2021-12-31 14:03:58

【问题描述】：

标题差不多。如果 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 浏览器中看到的内容：

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

【问题讨论】：

那么大的单词（包含数字语言）会造成溢出。由于浏览器倾向于在中断（空格）处开始换行。试着休息一下。

@Rana 我的错，我什至不认为这是一个词。谢谢

但是你的解决方案在word-break: break-all;属性中，继续尝试使用它，如果它用这么大的词解决了你的问题

这能回答你的问题吗？ How to force a line break in a long word in a DIV?

【参考方案1】：

我为这个问题做了一个代码 sn-p。我将您的盒子放入容器中，将您的文本放入 flex 中。在 flexbox 中，如果它溢出（我变成了溢出：隐藏），命令“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>