WordPress滑块文字拆分异常，如何通过CSS修复？

你的HTML结构：

<div class="box-caption--excerpt">
   <p>Compassion is “sensitivity to the pain or suffering of another, coupled with a deep desire to alleviate that suffering”. (Goetz et al, 2010)</p>
</div>

你尝试的CSS存在属性错误：word-space是无效属性，所以无法生效。以下是几种可行的解决方法：

方法1：禁止段落内换行（整段不折行） #

如果需要让整个段落保持一行不换行，使用正确的white-space属性：

.box-caption--excerpt p {
    white-space: nowrap;
}

注意：此方法会让文本超出容器宽度时溢出，需结合overflow: hidden或text-overflow: ellipsis处理溢出情况。

方法2：仅在空格处换行，避免拆分单词 #

如果希望文本可以换行，但不拆分完整单词或短语，使用以下CSS：

.box-caption--excerpt p {
    word-break: keep-all;
    overflow-wrap: normal;
}

该规则会让文本只在空格或合法连字符位置换行，避免将单个单词拆分成多行。

方法3：指定特定短语不拆分 #

如果仅需要引号内的短语不被拆分，可以给目标文本添加<span>标签并单独设置样式：

修改后的HTML：

<div class="box-caption--excerpt">
   <p>Compassion is <span class="no-wrap">“sensitivity to the pain or suffering of another, coupled with a deep desire to alleviate that suffering”</span>. (Goetz et al, 2010)</p>
</div>

对应的CSS：

.no-wrap {
    white-space: nowrap;
}

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