如何通过CSS/jQuery为Drupal页面的<h3>标题插入换行？

没问题！完全可以用 CSS 或者 jQuery 解决这个问题，分两种场景给你说明：

一、纯CSS实现通用自动换行 #

如果只是希望标题在容器宽度不足时自动换行，不需要指定具体的换行位置，直接给标题的链接元素添加以下 CSS 即可：

.views-field-title a {
  /* 允许长单词内部换行，适配窄容器 */
  word-break: break-word;
  /* 优先保留单词完整性，仅在必要时拆分 */
  overflow-wrap: break-word;
  /* 确保元素继承容器宽度，换行规则生效 */
  display: inline-block;
  width: 100%;
}

这样不管标题文本多长，只要页面缩小、容器宽度不够，标题就会自动换行，完全不需要修改原有HTML结构。

二、用jQuery实现指定位置换行（模拟手动加span的效果） #

如果你想精准控制换行位置（比如像你计划的那样，在「Electrotechniker」后面强制换行），可以用 jQuery 动态给文本插入 <span> 标签，再配合 CSS 实现效果：

首先添加 jQuery 代码：

$(document).ready(function() {
  // 遍历所有目标标题链接
  $('.views-field-title.clickable-link a').each(function() {
    const originalText = $(this).text();
    // 在指定文本后插入自定义span标签
    const updatedText = originalText.replace('Electrotechniker', 'Electrotechniker<span class="new"></span>');
    $(this).html(updatedText);
  });
});

然后补充 CSS 样式：

.views-field-title.clickable-link a .new {
  display: block;
}

这样就和你手动添加 span 标签的效果完全一致，能精准控制换行位置。

小提示：如果页面内容是通过 AJAX 动态加载的，记得把这段 jQuery 代码放在内容加载完成后执行，或者使用事件委托的方式确保代码生效。

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