Css 为什么overflow-y不能按预期工作

当文本到达div右侧的末尾时，我试图在Y轴上有一个滚动条。 问题是，当我输入带有空格的文本时，效果很好，但当我输入没有空格的长文本时，文本与X轴重叠。 这就是它的外观：

我正在使用样式化组件

这是代码示例：

// The container of the white box
const TodoContainer = styled.div`
  display: flex;
`;

// The white box with text inside
const TextContainer = styled.div`
  text-decoration: ${(props) => props.completed && "line-through"};
  background: #fff;
  color: ${(props) => props.theme.palette.text.primary};
  font-weight: 500;
  font-size: 1.6rem;
  border-radius: 5px;
  padding: 1rem;
  margin-right: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 20rem;
  max-width: 20rem;
  height: 2rem;
`;

---

如果需要的话，你必须告诉css把长单词分成新行

只需添加

wordbreak:break all

const TextContainer = styled.div`
   word-break: break-all;
   ...
`;

---

注意：您也可以使用

溢出包装：break word

。谢谢@trixn

如果需要的话，你必须告诉css把长单词换成新行

只需添加

wordbreak:break all

const TextContainer = styled.div`
   word-break: break-all;
   ...
`;

---

注意：您也可以使用

溢出包装：break word

。谢谢@trixn

这是

单词包装：打破单词。正在工作！伟大的非常感谢你。@trixn还有财产
wordwrap
（已弃用）在单词之间换行，同时
word break
在字符之间换行。此外，它在css3规范中被重命名为
overflow wrap
@trixn Chrome控制台甚至无法识别此类道具
word wrap
。你确定它是正确的吗？@kinduser。它确实存在，在我看来，它更合适，因为它只会打断一个长单词，如果它跨越的范围超过可用的水平空间。如果有多个单词，它将尝试在空格处中断，而
单词中断：全部中断也会打断小词。它是
单词包装：打断单词。正在工作！伟大的非常感谢你。@trixn还有财产
wordwrap
（已弃用）在单词之间换行，同时
word break
在字符之间换行。此外，它在css3规范中被重命名为
overflow wrap
@trixn Chrome控制台甚至无法识别此类道具
word wrap
。你确定它是正确的吗？@kinduser。它确实存在，在我看来，它更合适，因为它只会打断一个长单词，如果它跨越的范围超过可用的水平空间。如果有多个单词，它将尝试在空格处中断，而
单词中断：全部中断
也将打断小词。请尝试“单词换行：打断单词；属性强制断开长单词`换行：断开单词；强制断开长单词的属性