css 高度根据文本展示默认最低 和最高

CSS高度可以根据文本内容自动调整，确保总是包含内容的最小高度（即默认最小高度），同时保持最大的高度，以便适应屏幕空间。这通常涉及到使用`min-height`和`max-height`属性。以下是这两个属性的简要说明：

- `min-height`: 定义元素的最小高度，无论其内容有多少。如果内容的高度小于`min-height`值，元素的高度将等于内容高度；若内容高度大于`min-height`，则元素的高度会保持`min-height`设定的值。

.your-class {
  min-height: 100px; /* 保证元素不会太小 */
}

- `max-height`: 定义元素的最大高度。当内容高度超过`max-height`值时，内容会被截断并显示滚动条。如果内容高度小于`max-height`，则元素的高度将等于内容高度。

.your-class {
  max-height: 300px; /* 不让元素超出此高度 */
}

为了同时设置默认最低和最高高度，你可以这样组合它们：

.your-class {
  height: auto; /* 允许元素自适应高度 */
  min-height: 100px; /* 默认最小高度 */
  max-height: 300px; /* 最大高度 */
  overflow-y: auto; /* 若内容溢出，添加滚动条 */
}

这样一来，元素将以内容为基础，既不会因为内容少而显得太小，也不会因内容过多导致窗口难以查看。实际应用时，可能还需要配合其他样式如行高（line-height）和垂直对齐（vertical-align）来优化布局。