如何为未知长度的动态文本段落实现自定义HTML样式包裹

纯CSS实现（首选） #

通过box-decoration-break: clone属性让内联文本的样式在换行时克隆到每一行，完美匹配你需要的视觉效果：

<div class="text-block">
  <span class="text-content">
    <!-- 这里放入动态文本内容 -->
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 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. unknown galley
  </span>
</div>

/* 容器样式：模拟普通div的内边距和整体样式 */
.text-block {
  padding: 1rem; /* 顶部/左侧内边距与div一致 */
  width: 300px; /* 可根据需求调整宽度 */
  border: 1px solid #ccc; /* 仅演示用，可移除 */
}

/* 文本行样式：实现每行的块级视觉效果 */
.text-content {
  display: inline;
  line-height: 2.5; /* 通过行高模拟上下内边距，与容器内边距匹配 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome/Safari */
  /* 若需要背景色可取消注释 */
  /* background-color: #f0f0f0; */
}

效果说明：

• 每行文本的左右边缘自动对齐容器内边距，满足第三行与第四行右侧内边距一致的要求
• 行高统一，倒数第二行与最后一行的底部间距完全相同
• 动态文本自动换行，无需硬编码拆分
• 整个.text-block可像普通div一样添加边框、背景等样式

Tailwind CSS实现 #

直接用Tailwind工具类快速实现：

<div class="p-4 w-72 border border-gray-300">
  <span class="inline leading-[2.5] box-decoration-clone bg-gray-100">
    <!-- 动态文本内容 -->
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 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. unknown galley
  </span>
</div>

Angular组件实现 #

封装成可复用组件，支持动态传入文本：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-styled-text',
  template: `
    <div class="text-container">
      <span class="text-content">{{ content }}</span>
    </div>
  `,
  styles: [`
    .text-container {
      padding: 1rem;
      width: 300px;
      border: 1px solid #ccc;
    }
    .text-content {
      display: inline;
      line-height: 2.5;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      background-color: #f0f0f0;
    }
  `]
})
export class StyledTextComponent {
  @Input() content!: string;
}

使用方式：

<app-styled-text [content]="yourDynamicText"></app-styled-text>

备选方案（文本对齐效果） #

若上述方案因兼容问题无法使用，可采用两端对齐实现文本右边缘统一：

<div class="justify-text-block">
  <!-- 动态文本内容 -->
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 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. unknown galley
</div>

.justify-text-block {
  padding: 1rem;
  width: 300px;
  border: 1px solid #ccc;
  text-align: justify;
}

.justify-text-block::after {
  content: "";
  display: inline-block;
  width: 100%;
}

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