如何实现transcription-text容器内单单词span标签自动换行对齐？

我有一个表格，其中包含带transcription-text类的div，该div内的#Text#会生成对应每个单词的独立span标签。当表格宽度缩小时，这些span标签不会在容器边界处自动换行，我需要让它们能根据transcription-text容器的宽度自动换行对齐，效果类似Bootstrap的row组件。

原模板代码如下：

<div class="panel-body">
                <div class="panel-transcription-alert alert alert-warning" style="display: none;">
                </div>
                <table class="table table-transcription">

                    <tr class="transcription-row #Custom_TranscriptionItemType_Name# base-repeater-item hide" data-toggle="popover" data-placement="top" title="#TitleOriginalText#" data-content="#OriginalText#" data-trigger="hover">
                        <td class="col-sm-12 text" data-start="#Start#" data-end="#End#" data-startrelative="#StartRelative#" data-endrelative="#EndRelative#" data-transcription-item-id="#Id#">
                            <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
                                <div class="transcription-item">
                                    <button type="button" class="btn btn-primary btn-play-loop" style="display: none;" onclick="playLoop(this)">
                                        <i class="fas fa-play"></i>
                                    </button>
                                    <div class="transcript-time-container">
                                        <div style="display: table-row">
                                            <div class="transcript-time-item start" style="">
                                                #StartFormatted#
                                            </div>
                                            <div class="transcript-time-item" style="">
                                                #EndFormatted#
                                            </div>
                                        </div>
                                    </div>
                                    <div class="transcript-text-container">
                                        <div style="display: table-row">
                                            <div style="display: table-cell;">
                                                <span class="badge badge-default">
                                                    <i class="#Custom_TranscriptionItemType_Badge#"></i>
                                                    <span>#SpeakerSide#</span>
                                                </span>
                                            </div>
                                            <div class="transcription-text">                                                    
                                                #Text#                                                 
                                            </div>
                                            <div style="display: table-cell; padding-left: 7px; display: none; width: 800px;" contenteditable="true" class="transcription-text-edit"></div>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex;">
                                    <div class="container-badge-edited-transcript" style="margin-left: 10px; display: none;" title="Texto editado">
                                        <div class="badge badge-warning">
                                            E
                                        </div>
                                    </div>
                                    <div class="transcription-intentions" style="margin-left: 10px;" title="Intenção">
                                        <div class="badge badge-info">
                                            <span>#Intention#</span>
                                        </div>
                                    </div>
                                    <div class="transcription-sentiments intention" style="margin-left: 10px;" title="Sentimento">
                                        <div class="badge #SentimentTypeBadge#">
                                            <span>#Sentiment#</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="transcription-categories" style="display: none;">
                                <hr />
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

解决方案 #

方案1：Flex布局（推荐，贴合Bootstrap row的弹性效果） #

给.transcription-text添加以下CSS样式：

.transcription-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem; /* 可选：调整单词之间的间距 */
  align-items: center; /* 可选：让单词垂直居中对齐 */
  flex: 1; /* 确保容器占用剩余可用宽度 */
}

flex-wrap: wrap会让容器内的span元素在空间不足时自动换行，完美实现流式排列效果。

方案2：调整父容器布局（解决table布局的宽度限制） #

原代码中transcript-text-container使用了display: table-row，可能会限制transcription-text的可用宽度，建议将其改为Flex布局，确保容器能充分利用空间：

<div class="transcript-text-container">
  <div style="display: flex; align-items: center; gap: 0.5rem;">
    <div>
      <span class="badge badge-default">
        <i class="#Custom_TranscriptionItemType_Badge#"></i>
        <span>#SpeakerSide#</span>
      </span>
    </div>
    <div class="transcription-text">                                                    
      #Text#                                                 
    </div>
    <div style="padding-left: 7px; display: none; width: 800px;" contenteditable="true" class="transcription-text-edit"></div>
  </div>
</div>

方案3：行内块元素方案（兼容旧浏览器） #

如果不需要Flex布局，也可以将每个单词span设置为行内块元素：

.transcription-text span {
  display: inline-block;
  margin-right: 0.25rem; /* 控制单词间距 */
}
.transcription-text {
  width: 100%; /* 确保容器占满可用宽度 */
}

inline-block元素会像普通文本一样自动换行，同时保留块级元素的特性。

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