css 超过高度不换行

要使 CSS 中的内容超过高度不换行，您可以使用 `white-space` 属性来控制文本的换行方式。

如果您希望文本在超过容器高度时不换行，可以将 `white-space` 属性设置为 `nowrap`，如下所示：

.container {
  white-space: nowrap;
  overflow: hidden;
}

这将使文本在容器内水平滚动，而不会换行。如果您希望显示一个水平滚动条，您可以将 `overflow` 属性设置为 `auto`，如下所示：

.container {
  white-space: nowrap;
  overflow: auto;
}

如果您希望文本在容器内溢出并显示省略号（...），您可以结合使用 `text-overflow` 属性和 `overflow` 属性，如下所示：

.container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这将使超出容器的文本以省略号的形式显示。

请注意，以上示例中的 `.container` 是一个代表容器的 CSS 类名，您可以根据自己的实际情况进行替换。

相关问题

css 实现溢出不换行 添加展开符合

实现溢出不换行和添加展开符号是使用CSS的文本溢出处理技术。可以使用以下属性和值来实现：

1. 使用`white-space`属性来控制文本的换行方式。设置为`nowrap`可以防止文本换行，即使内容超出容器的宽度。

2. 使用`overflow`属性来控制溢出内容的显示方式。设置为`hidden`可以隐藏溢出部分，使其在容器的边界内显示。

3. 使用`text-overflow`属性来控制溢出内容的展示形式。设置为`ellipsis`可以在溢出部分的末尾显示省略号。

4. 使用伪类选择器`::after`来添加展开符号。通过设置`content`属性为展开符号的unicode码，例如`content: "\25BC"`来显示一个向下的三角形符号。

示例代码如下：

HTML：

<div class="container">
  <p class="text">这是一段很长的文本内容，超过容器宽度会产生溢出。</p>
</div>

CSS：

.container {
  width: 200px;
  height: 50px;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
}

.text {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text::after {
  content: "\25BC";
  position: absolute;
  right: 0;
  bottom: 0;
}

以上代码中，`.container`为具有固定宽度和高度的容器，`.text`为文本段落，设置其`white-space`属性为`nowrap`可以阻止文本换行，`text-overflow`属性为`ellipsis`可以在溢出部分显示省略号。通过使用`.text::after`伪类选择器添加展开符号，设置`content`属性为`\25BC`可以显示一个向下的三角形符号。

css弹性盒子自动换行

当弹性盒子的子元素宽度总和超过容器宽度时，弹性盒子默认会压缩子元素的宽度以适应容器。而如果希望子元素自动换行，可以通过设置`flex-wrap`属性为`wrap`来实现。

例如，以下代码将创建一个包含三个子元素的弹性盒子，当容器宽度不足以容纳所有子元素时，子元素会自动换行：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

在上述代码中，`.container`是弹性盒子容器，设置了`flex-wrap: wrap`以实现自动换行。`.item`是子元素，设置了固定宽度和高度以及外边距。当容器宽度不足以容纳三个`.item`时，第三个`.item`会自动换行到下一行。