一个div中多个p，当p换行时在本行写满后换行

可以使用CSS的`display`属性和`white-space`属性来实现这个效果。具体步骤如下：

1. 设置 div 的 `display` 属性为 `flex`，让多个 p 元素在一行内并排显示；
2. 设置 p 的 `white-space` 属性为 `nowrap`，禁止 p 元素自动换行；
3. 设置 p 的 `overflow-wrap` 属性为 `break-word`，让单词在 p 元素内自动换行。

下面是实现的 CSS 代码：

div {
  display: flex;
  flex-wrap: wrap;
}

p {
  white-space: nowrap;
  overflow-wrap: break-word;
}

这样就可以让多个 p 元素在 div 中横向并排显示，当某个 p 元素的内容超出了一行时，会自动在该元素内部进行换行，而不会影响其他 p 元素的位置。

相关问题

vue+elementui的页面中，ul 的li 中三块内容 ，分别为长文本、短文本、按钮，补充css样式，使每个li的所有内容都是上下对齐，类似于表格每一列，长文本超出一定宽度后使用省略号，尽可能完善css，保证页面美观

在使用Vue结合Element UI开发页面时，若要在`<ul>`的`<li>`元素中实现内容上下对齐，并且对于长文本超出一定宽度后使用省略号，可以通过CSS样式来控制。以下是一个简单的示例，展示如何通过添加CSS类来实现这些要求：

首先，为`<ul>`添加一个类名，比如叫做`list-container`，然后给每个`<li>`添加一个类名，比如叫做`list-item`。接着，我们为长文本添加一个`span`或者`div`标签，并为其添加一个类名，比如叫做`long-text`。

<template>
  <div>
    <ul class="list-container">
      <li class="list-item">
        <!-- 短文本可以直接放置 -->
        短文本内容
        <!-- 长文本部分 -->
        <span class="long-text">这里是可能会很长的一段文本，需要在溢出时显示省略号。</span>
        <!-- 按钮部分 -->
        <el-button type="primary">按钮</el-button>
      </li>
      <!-- 更多的li元素 -->
    </ul>
  </div>
</template>

<style>
.list-container {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex; /* 使用弹性盒模型 */
  align-items: center; /* 垂直居中对齐 */
  line-height: 1.5; /* 文本行高，以垂直居中 */
  border-bottom: 1px solid #eee; /* 可选：列表项下边框 */
  padding: 10px 0; /* 上下10px，左右0 */
}

.long-text {
  flex: 1; /* 使长文本占据剩余空间 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  padding-right: 10px; /* 可选：右内边距，为了留出按钮位置 */
}
</style>

在这个示例中，`.list-container`定义了ul的整体样式，`.list-item`使用了`flex`布局，`display: flex;`和`align-items: center;`确保了所有子元素（短文本、长文本和按钮）在垂直方向上的居中对齐。`.long-text`中的`flex: 1;`使其占据剩余的空间，并且设置了`white-space: nowrap;`来保证文本不换行，`overflow: hidden;`和`text-overflow: ellipsis;`组合则是在文本超出时显示省略号。