在网站内容运营中，我们经常会遇到文章详情、产品描述或是用户评论等场景下，文本内容过长导致页面布局混乱，甚至溢出容器，严重影响用户体验。尤其是当一段没有空格的连续英文单词或是一长串中文出现在狭窄的区域时，浏览器默认的换行机制可能无法满足我们的设计需求。幸好，安企CMS为模板开发者提供了一个非常实用的工具来优雅地解决这个问题——那就是wordwrap过滤器。

这个wordwrap过滤器，顾名思义，就是用来对长文本进行“单词换行”处理的。它会根据你设定的一个数字（即每行最大字符数），在文本中寻找空格进行断行，从而避免一行文字过长。通过合理地使用它，我们可以确保长文本在不破坏页面结构的前提下，实现自动换行，让内容呈现更加整洁美观。

如何使用wordwrap过滤器

在安企CMS的模板中，使用wordwrap过滤器非常直观，它的基本语法是：{{ 变量 | wordwrap: 长度 }}。

  • 变量指的是你希望进行换行处理的文本内容，比如文章正文、描述等，通常通过模板标签获取，例如{{ archive.Content }}。
  • 长度则是一个整数，表示你希望每一行文本显示的最大字符数。当文本长度超过这个数字时，过滤器就会尝试在最近的空格处进行换行。

这意味着如果你的内容是一串没有空格的连续英文字符，或者是一段连续的中文文字，wordwrap过滤器可能无法按照预期在中间进行换行。这是因为该过滤器主要依据文本中的空格来判断换行点。对于中文内容，由于字符之间通常没有空格，这个过滤器默认不会在字中间断开。如果需要对中文或无空格英文进行强制性换行，可能需要结合其他方法或CSS属性。

下面是一些实际的例子，帮助你理解它的用法：

示例1：基本英文文本换行

假设你有一段英文描述，希望每行不超过15个字符（在遇到空格时换行）：

{% set longText = "This is a very long sentence that needs to be wrapped beautifully on the webpage." %}
<p>{{ longText | wordwrap: 15 }}</p>

这段代码可能会输出类似这样的内容：

This is a very
long sentence
that needs to
be wrapped
beautifully on
the webpage.

可以看到，wordwrap过滤器在遇到空格时进行了换行，保持了单词的完整性。

示例2：结合<pre>标签和linebreaksbr过滤器，保留换行效果

有时，我们希望不仅换行，还希望能在HTML中直接体现出<br/>标签的效果，特别是当文本内容可能本身就带有换行符时。安企CMS提供了linebreaksbr过滤器，可以将文本中的换行符\n转换为HTML的<br/>标签。

<pre>{% filter wordwrap: 20 %}{% lorem 50 w %}{% endfilter %}</pre>

或者结合linebreaksbr：

<p>{{ "Lorem ipsum dolor sit amet, consectetur adipiscing elit." | wordwrap: 10 | linebreaksbr | safe }}</p>

这里使用了lorem标签生成随机拉丁文文本进行演示。wordwrap: 10会限制每行最长10个字符，linebreaksbr则将新生成的换行符转换为<br/>，safe过滤器是确保HTML标签能够被浏览器正常解析显示。

示例3：中文文本换行的限制

如果你尝试对一段连续的中文文本使用wordwrap过滤器：

”`twig {% set chineseText = “这是一段非常非常长的中文文本，它没有包含任何空格，因此wordwrap过滤器可能无法对其进行有效的基于空格的换行处理。” %}