Vue结合Bulma使用时如何保留字符串中的所有空格？

两种方案没生效本质是两个低级问题：

• Bulma 对表格下的td、th默认设置了优先级更高的white-space: nowrap样式，你写的.whiteSpace类选择器权重不够，直接被框架默认样式盖掉了
• 你把<style>标签嵌在<table>标签内部属于不规范写法，浏览器解析时根本不会正确执行这段样式，写了等于白写

二选一就行，都是Vue+Bulma环境下跑通的写法：

方案1：样式覆盖（最推荐，不破坏原有表格布局） #

把样式从table标签里挪出来，放到Vue组件独立的style块里，提高选择器权重命中单元格，优先用pre-wrap属性，既能保留连续空格、原始换行，又不会让长内容撑破表格布局：

// Bulma引入放在样式块最顶部
@import "../node_modules/bulma";

// 选择器权重高于Bulma默认td样式就会生效
.table.whiteSpace td {
  white-space: pre-wrap;
}

模板部分对应写法：

<table class="table whiteSpace">
  <tbody>
    <tr>
      <td>{{ mysqlcomumn_hasMultipleSpace }}</td>
    </tr>
  </tbody>
</table>

如果你给组件的style标签加了scoped属性，记得加深度选择器穿透样式作用域：

<style lang="scss" scoped>
@import "../node_modules/bulma";

:deep(.table.whiteSpace td) {
  white-space: pre-wrap;
}
</style>

方案2：修正pre标签写法 #

之前套pre没效果，一是Bulma给pre默认加了边距、背景等预设样式，二是td的默认nowrap属性会影响内部pre的表现，按下面改就行：
模板部分：

<td>
  <pre class="is-marginless">{{ mysqlcomumn_hasMultipleSpace }}</pre>
</td>

配套加几行样式适配表格场景：

td pre {
  white-space: pre-wrap;
  overflow: auto;
  padding: 0;
  background: transparent;
  font: inherit;
}

这个方案更适合需要1:1还原文本原始排版（空格+换行都保留）的长文本场景。

写完如果还不生效，直接打开浏览器开发者工具选中对应td元素，看Computed面板里的white-space值，如果还是显示nowrap，就说明选择器权重不够，多加一层父级选择器提权重就行。别用pre值硬上，长文本会直接横向溢出把表格撑变形，pre-wrap是兼顾格式保留和布局稳定性的最优选择。

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