如何在 CSS 中使用 flex-shrink 换行？

Posted 2023-03-05

【中文标题】如何在 CSS 中使用 flex-shrink 换行？

【英文标题】：How to line break with flex-shrink in CSS?

【发布时间】：2021-09-12 19:59:38

【问题描述】：

我正在尝试使用此示例开发一个类似聊天的系统。

https://www.bootdey.com/snippets/view/white-chat

我将<input type="text"> 替换为<textarea>，因为消息通常由多行组成。

我想显示带有换行符的消息。但我做不到。 flex-shrink 有问题吗？

例如，当我在 textarea 中输入这个时，↓

Hello
    World

消息显示如下。 ↓

Hello World

我希望与 textarea 输入中的换行符相同。 ↓

Hello
    World

我将此样式添加到<div class="flex-shrink-1 bg-light rounded py-2 px-3 mr-3">

white-space: pre-wrap;
word-wrap: break-word;

但是消息的显示没有改变。

请告诉我在这种情况下如何换行。

----------------------------------- ------------ps

没有flex-shrink，显示的信息是这样的↓ 结果没有改变。所以我明白flex-shrink 不是问题。

Hello World

没有flex-shrink，有white-space: pre-wrap; word-wrap: break-word;，显示的信息很奇怪↓

                                            Hello
World

我不知道是什么问题。

这里是 html 和 CSS 源代码。 https://www.bootdey.com/snippets/view/white-chat

【问题讨论】：

在没有弹性收缩的情况下可以工作吗？找出最简单的方法是删除该 flex 收缩类

可能需要查看一些代码和/或简化的测试用例。当我将 `style = "white-space:pre-wrap" 添加到该链接页面上的一个气泡中，然后在文本中添加一些换行符和空格时，它起作用了。

您将white-space: pre-wrap; 添加到哪个标签和CSS 选择器？我加了<div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-3">，但是没用。

【参考方案1】：

像这样在 css 文件中尝试 flex-shrink

flex-shrink: 8;

用你想要的值填写 8

【讨论】：

我把flex-shrink: 0;换成了flex-shrink: 8;，但是不行……