如何让pre标签宽度随窗口缩小？解决q-card无法收缩问题

pre标签默认会保留内容的原始格式，且宽度由内容决定，不会自动收缩，这就是它撑住q-card导致容器无法随窗口缩小的原因。要实现类似ChatGPT的代码展示效果，只需通过CSS调整pre和父容器的样式即可：

核心CSS修改 #

/* 调整pre标签的换行与宽度 */
pre {
  white-space: pre-wrap; /* 保留换行，允许长行自动换行 */
  word-wrap: break-word; /* 强制超长单词/代码换行 */
  max-width: 100%; /* 最大宽度不超过父容器 */
  overflow-x: auto; /* 内容过长时显示横向滚动条 */
  margin: 0; /* 去掉默认外边距，避免多余间距 */
}

/* 确保卡片容器自适应 */
.card-code {
  max-width: 90vw; /* 限制卡片最大宽度为视口90%，优化大屏显示 */
  width: 100%; /* 宽度随父容器自适应 */
}

.q-card-section {
  padding: 1rem; /* 调整内边距，让内容更美观 */
}

修改后的完整代码 #

<div id="q-app">
  <div class="q-ma-md">
    <q-layout view="lHh Lpr lFf">
      <q-page-container>
        <q-page class="flex flex-center">
          <q-list>
            <q-item class="justify-center">
              <q-item-section class="left-sec">
              </q-item-section>
              <q-item-section class="custom-message">
                <q-card flat bordered class="card-code">
                  <q-card-section>
                    <pre>
                    <code>
                    {{ newMessage }}
                    </code>
                    </pre> 
                   <!-- <q-item-label> {{ newMessage }} <q-item-label> -->
                  </q-card-section>
                </q-card>
              </q-item-section>
              <q-item-section class="right-sec">
              </q-item-section>
            </q-item>
          </q-list>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>

  <div class="q-ma-md">
    Running Quasar v{{ $q.version }}
  </div>
</div>

样式说明 #

• white-space: pre-wrap：既保留pre标签的换行格式，又允许长内容自动换行，不会撑破容器
• word-wrap: break-word：针对超长的代码片段或单词，强制拆分换行，避免横向溢出
• overflow-x: auto：当内容确实超过容器宽度时，显示横向滚动条，保证内容完整可见，同时不影响容器收缩
• max-width: 90vw：限制卡片的最大宽度，避免在大屏上过于宽大，提升阅读体验

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