Haml 中删除文本周围空格的方法

Haml 提供了几种方式来控制文本周围的空格处理，以下是主要方法和应用场景：

1. 使用 > 和 < 操作符

Haml 提供了 > 和 < 操作符来控制标签内外的空格：

%span> Hello
%span< World

渲染结果为：

<span>Hello</span> <span>World</span>

• > 删除标签右侧的空格
• < 删除标签左侧的空格

2. 使用 ~ 操作符保留空格

如果需要保留空格，可以使用 ~ 操作符：

%span~ Hello
%span~ World

渲染结果为：

<span> Hello </span> <span> World </span>

3. 使用 = 和 != 进行输出

Haml 提供了两种输出方式：

%p= "  Hello  "
%p!= "  Hello  "

• = 会自动转义 HTML 并去除首尾空格
• != 不转义 HTML 但保留空格

4. 使用 preserve 辅助方法

= preserve do
  %pre
    This text will
    preserve its whitespace.

5. 使用 :preserve 过滤器

:preserve
  This text will
  preserve its whitespace.

常见应用场景

1. 内联元素：当需要多个内联元素紧密排列时
2. 表单元素：表单标签和输入框之间需要精确控制间距时
3. 导航菜单：菜单项之间需要精确控制间距时
4. 代码块：需要保留缩进和换行时

注意事项

• Haml 默认会去除不必要的空格以提高 HTML 的紧凑性
• 在需要精确控制布局时，建议使用 CSS 而非依赖空格
• 过度使用空格控制可能会降低模板的可读性

通过合理组合这些方法，可以精确控制 Haml 模板渲染后的空格情况。