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`可以显示一个向下的三角形符号。