Flex布局下如何让超出容器宽度的文本自动换行

flex 布局下如何实现文本自动换行

Flex 布局是网页开发中常用的布局方式，但当子元素文本内容过长超出容器宽度时，可能会导致布局错乱。 本文介绍一种简单方法，让Flex容器中的文本自动换行。

解决方法是在超出容器宽度的子元素上添加 word-break: break-all; 属性。该属性告诉浏览器允许在单词内部断行，从而避免文本溢出。

以下是一个修改后的代码示例：

ul {    display: flex;    background-color: rgb(90, 162, 230);    height: 500px;    width: 500px;}li {    width: 200px;    height: 200px;    background-color: pink;    word-break: break-all; /*  关键属性 */}

登录后复制

通过添加 word-break: break-all; ，即使文本内容超过 li 元素的宽度，也能自动换行显示，保持布局整洁。

以上就是Flex布局下如何让超出容器宽度的文本自动换行的详细内容，更多请关注【创想鸟】其它相关文章！