Html 介绍a<；br>；对于宽度小于768像素的设备

我有以下长长的副标题：

Selbsterfahrung|Persönlicheitchentwicklung|Gesundheitsprävention

其HTML如下所示：

<h2>Selbsterfahrung <span class="divider"> | </span> Persönlichkeitsentwicklung <span class="divider"> | </span> Gesundheitsprävention</h2>

但对于1024像素以下的设备，第一行中的前两个字和第二行中的最后一个字如下：

<h2>Selbsterfahrung <span class="divider"> | </span> Persönlichkeitsentwicklung <span class="divider"> | </span> Gesundheitsprävention</h2>

Selbsterfahrung Persönlicheetsentwicklung
Gesundheitsprävention

这不是很好

问题:

是否可以为1024像素以下的介质引入

来代替SPAN标签？

或

有没有办法告诉HTML将devicesd中768像素宽度以下的每个单词隔成一行？

所以我想把每个单词放在一行中，比如：

Selbsterfahrung
Persönlicheetsentwicklung

---

Gesundheitsprävention

您可以使用

display:block

将它们放在单独的行中，而不是

display:none

，并使用

可见性：hidden

使分隔符不可见

同时将

font-size:0

插入

分隔符

，以删除它所占用的空间

请参见下面的演示：

@仅媒体屏幕和（最大宽度：769px）{
.分隔器{
显示：块；
可见性：隐藏；
字号：0；
}
}

---

Selbsterfahrung | Persönlicheitchentwicklung | Gesundheitsprävention

您可以有两个跨度，而不是一个：

<h2>Selbsterfahrung <span class="divider-wide"> | </span><span class="divider-narrow"><br></span> Persönlichkeitsentwicklung <span class="divider-wide"> | </span><span class="divider-narrow"><br></span> Gesundheitsprävention</h2>

---

也许有更优雅的东西，但这应该有用。

使父单词的宽度小于最小单词的宽度，如下所示：

.small-width {
    word-spacing: 10px; 
}

---

这样，它将强制将单词换行

这是一种比我的答案更好的方法，我应该想到

可见性

.small-width {
    word-spacing: 10px; 
}