如何用CSS将包含多行文本的多个p标签并排显示？

想要实现多个可包含多行文本的段落，每个段落末尾带圆形标记且后续文本紧跟排列，不用额外冗余标签的话，可以用CSS伪元素结合合适的布局属性来解决，比你之前用内联样式加div的方式更简洁可靠：

核心实现代码 #

HTML结构 #

<div class="paragraph-container">
  <p class="inline-paragraph">This is a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="inline-paragraph">Dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="inline-paragraph">Elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  <p class="inline-paragraph">Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CSS样式 #

.paragraph-container {
  /* 可选：设置容器宽度，让段落自动换行 */
  width: 800px;
}

.inline-paragraph {
  display: inline-block;
  /* 允许段落多行显示 */
  max-width: 200px;
  margin: 0 8px 0 0;
  /* 让圆形和文本垂直居中对齐 */
  vertical-align: middle;
}

.inline-paragraph::after {
  content: '';
  display: inline-block;
  /* 圆形尺寸 */
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
  /* 圆形和文本的间距 */
  margin-left: 4px;
  /* 确保圆形和文本居中对齐 */
  vertical-align: middle;
}

/* 最后一个段落不需要圆形标记 */
.inline-paragraph:last-child::after {
  display: none;
}

关键说明 #

• 用inline-block替代inline：既保留了段落的块级特性（支持多行文本、设置宽度），又能让段落并排排列，解决纯inline无法控制宽高的问题。
• 伪元素::after生成圆形：不需要额外的div标签，语义化更强，还能通过CSS统一控制圆形的样式、位置。
• 垂直对齐设置：通过vertical-align: middle让圆形和段落文本居中对齐，避免出现错位问题。
• 可自定义调整：修改max-width控制每个段落的宽度，调整圆形的width/height和background-color改变样式，修改margin调整间距。

内容的提问来源于stack exchange，提问作者Poria Na