如何为标记中的auth_public_key字段添加按长度的断行/连字符？

方法一：纯CSS实现（最省心） #

直接给显示字段的span加个CSS类，用样式实现自动断行，不用改后端逻辑：

.break-long-key {
  overflow-wrap: break-word; /* 让长单词自动换行 */
  word-break: break-all; /* 强制在任意字符处换行（适合纯字母/数字的长串） */
  white-space: pre-wrap; /* 保留手动换行，同时自动适配容器宽度换行 */
}

修改后的Haml代码：

- if @connection.auth_public_key.present?
  %el-row.m-b-10
    %el-col.p-t-15.p-b-15.p-l-20.p-r-20{":span" => "24"}
      %span.break-long-key= @connection.auth_public_key

方法二：后端按固定长度断行 #

如果必须严格按指定长度（比如每3个字符就换行），在Ruby层处理字符串：

# 把字符串每3个字符切分，中间加换行符
formatted_key = @connection.auth_public_key.scan(/.{1,3}/).join("\n")

然后在Haml里直接输出处理后的内容：

- if @connection.auth_public_key.present?
  %el-row.m-b-10
    %el-col.p-t-15.p-b-15.p-l-20.p-r-20{":span" => "24"}
      %span.break-long-key= formatted_key

提示：如果要让HTML识别换行，要么给span加white-space: pre-wrap样式，要么把换行符换成<br>标签（用raw方法输出）

方法三：前端JS动态处理 #

要是想在前端动态调整，用JS处理文本：

const keyEl = document.querySelector('.auth-public-key');
if (keyEl) {
  const rawKey = keyEl.textContent;
  // 每3个字符加换行
  const formattedKey = rawKey.replace(/(.{3})/g, '$1\n');
  keyEl.textContent = formattedKey;
}

对应的Haml要给span加类名：

- if @connection.auth_public_key.present?
  %el-row.m-b-10
    %el-col.p-t-15.p-b-15.p-l-20.p-r-20{":span" => "24"}
      %span.auth-public-key= @connection.auth_public_key

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