Html 如何拉伸内容以填充容器，同时仅在必要时使用CSS均匀地包装文本？

我有一个页面来填充一些值。我正在尝试使用CSS来正确地打断文本行，而不需要

元素

像这样工作是有必要的：

This text is wrongly distributed in the first example but correctly distributed in the
second example.

This text is wrongly distributed in the first example
but correctly distributed in the second example.

• 支持内容完全（水平）填充顶部
  容器，但不能使其溢出

• 和
  元素拉伸以填充可用空间并具有最小宽度

• 元素的宽度应尽可能短，同时避免断线，除非需要

• 元素只有在不需要换行的情况下才应该换行，同一行中的其他元素（
  或
  ）不能具有最小宽度且不会溢出
• 当一个
  元素被分成多行时，它应该均匀地分布文本，使其具有最短的宽度（同时仍然不会重复不必要地打断多行）。例如：

正确：

One two
three

不正确：

One
two three

One
two
three

---

代码：

正文{
背景色：rgb（33,38,45）；
颜色：rgb（255、255、255）；
字体系列：无衬线；
字体大小：20px；
字体大小：粗体；
保证金：0；
}
正文>div{
背景色：rgb（32,32,32）；
保证金：0自动；
空白：nowrap；
宽度：400px；
}
div>div{
对齐项目：居中；
显示器：flex；
边缘顶部：10px；
}
跨度{
文本对齐：居中；
}
格林{
颜色：rgb（0，128，0）；
}
红色{
颜色：rgb（196,0,0）；
}
蓝色{
颜色：rgb（64,64,255）；
}
黄色{
颜色：rgb（255、128、0）；
}
挑选{
背景色：rgba（0,0,0,0.2）；
边框：2个实心rgb（196196196196196）；
边界半径：5px；
颜色：rgb（228167105）；
字体大小：20px；
左边距：10px；
最小宽度：200px；
大纲：无；
填充：10px；
宽度：100%；
}
选择权{
颜色：rgb（0,0,0）；
}
选择：第一个孩子{
显示：无；
}
输入{
背景色：rgba（0,0,0,0.2）；
边框：2个实心rgb（196196196196196）；
边界半径：5px；
颜色：rgb（228167105）；
字体大小：20px；
左边距：10px；
最小宽度：200px；
大纲：无；
填充：10px；
宽度：100%；
}

短文本：选择一个选项否
文本稍长：选择一个选项否
文本支持分成三行：选择选项否
手动将文本分成两行：选择选项否
此文本正确地分为三行：选择选项否
文本
错误
损坏：选择选项否
评论：
否否
否：
是是
是是：

因为标签太长，所以无法使其内联 我在下面提出的最佳解决方案请看一看

解决方案：从主

div

中删除

空白

，并使用一些

flex

属性以及

input/select上的
max width
属性


正文{
背景色：rgb（33,38,45）；
颜色：rgb（255、255、255）；
字体系列：无衬线；
字体大小：20px；
字体大小：粗体；
保证金：0；
}
正文>div{
背景色：rgb（32,32,32）；
保证金：0自动；
宽度：400px；
}
div>div{
对齐项目：居中；
显示器：flex；
边缘顶部：10px；
证明内容：之间的空间；
}
跨度{
文本对齐：居中；
最小宽度：37%；
}
格林{
颜色：rgb（0，128，0）；
}
红色{
颜色：rgb（196,0,0）；
}
蓝色{
颜色：rgb（64,64,255）；
}
黄色{
颜色：rgb（255、128、0）；
}
挑选{
背景色：rgba（0,0,0,0.2）；
边框：2个实心rgb（196196196196196）；
边界半径：5px；
颜色：rgb（228167105）；
字体大小：20px；
最小宽度：200px；
大纲：无；
填充：10px；
宽度：100%；
}
选择权{
颜色：rgb（0,0,0）；
}
选择：第一个孩子{
显示：无；
}
输入{
背景色：rgba（0,0,0,0.2）；
边框：2个实心rgb（196196196196196）；
边界半径：5px；
颜色：rgb（228167105）；
字体大小：20px；
最小宽度：177px；
大纲：无；
填充：10px；
宽度：100%；
}

短文本：选择一个选项否
文本稍长：选择一个选项否
文本支持分成两行：选择选项否
手动将文本分成两行：选择选项否
此文本正确地分为三行：选择选项否
文本错误地断开：选择一个选项否
评论：
否否否：
是是是是：
我完全不知道将文本分成两行而不是三行的标准是什么。我从帖子里想不出来，但我会试试看

也许这是你想要的：


正文{
背景色：rgb（33,38,45）；
颜色：rgb（255、255、255）；
字体系列：无衬线；
字体大小：20px；
字体大小：粗体；
保证金：0；
}
正文>div{
背景色：rgb（32,32,32）；
保证金：0自动；
/*空白：nowrap；删除，使用flex修复，因为您已经在使用它*/
宽度：400px；
}
div>div{
对齐项目：居中；
显示器：flex；
边缘顶部：10px；
}
跨度{
文本对齐：居中；
}
格林{
颜色：rgb（0，128，0）；
}
红色{
颜色：rgb（196,0,0）；
}
蓝色{
颜色：rgb（64,64,255）；
}
黄色{
颜色：rgb（255、128、0）；
}
挑选{
背景色：rgba（0,0,0,0.2）；
边框：2个实心rgb（196196196196196）；
边界半径：5px；
颜色：rgb（228167105）；
字体大小：20px；
左边距：10px；
最小宽度：200px；
大纲：无；
填充：10px；
宽度：100%；
flex:1；/*添加此*/
}
选择权{
颜色：rgb（0,0,0）；
}
选择：第一个孩子{
显示：无；
}
输入{
背景色：rg