css如何实现 人员----> 人员---->并且可以换行显示的这种效果

在CSS中，要实现人员名称逐行换行显示的效果，通常会使用`<span>`、`<p>`元素或者列表`<ul>`、`<ol>`配合CSS的`white-space`属性来控制。以下是几种常见的方法：

1. **使用`<p>`标签**：

<p class="person">
   人员姓名1<br>
   人员姓名2<br>
   <!-- 更多人员名字 -->
</p>

然后通过CSS设置：

.person {
   white-space: nowrap; /* 阻止文本自动换行 */
   overflow: hidden; /* 如果内容超出，隐藏多余部分 */
   text-overflow: ellipsis; /* 显示省略号 */
   display: -webkit-box; /* 对于旧版浏览器需要的前缀 */
   display: -ms-flexbox; /* IE 10兼容 */
   display: flex;
   -ms-flex-wrap: wrap; /* IE 10兼容 */
   flex-wrap: wrap; /* 新版浏览器 */
}

2. **使用`<span>`标签并使用line-clamp属性**（CSS3特性，不是所有浏览器支持）：

<span class="person" style="display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;">人员姓名1<br>人员姓名2</span>

请注意，这种方法依赖于特定的CSS前缀，如 `-webkit-`。

3. **使用无序列表`<ul>`或有序列表`<ol>`**：

<ul class="people">
   <li>人员姓名1</li>
   <li>人员姓名2</li>
   <!-- 更多人员名字 -->
</ul>

CSS样式：

.people li {
   display: inline-block;
   vertical-align: top;
   /* 添加其他布局调整 */
}

这将使每个列表项在同一行上显示。