介绍一个<br>下768pixels设备宽度

Selbsterfahrung | Persönlichkeitsentwicklung| Gesundheitsprävention

其HTML看起来像这样：

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

对于下768px宽的设备，我隐藏 “|”用一个简单的

@media only screen and (max-width: 769px) { 
    .header-description .divider { 
     display: none; 
    } 
}

但对于设备下1024像素，我得到的第一线，最后一个在第二行的前两个单词，像这样：

SelbsterfahrungPersönlichkeitsentwicklung
Gesundheitsprävention

这是不是很漂亮

问题：

是否可以在1024像素以下的介质中引入<br>代替SPAN标签？

有没有办法告诉HTML在新线的每个字分开在devicesd下768pixels宽？

所以我想有像一个单独的行中的每个字：

Selbsterfahrung
Persönlichkeitsentwicklung
Gesundheitsprävention

来源

2017-09-15 Rafael Munoz

相反的display: none，你可以把它们变成使用display: block单独的线路并使用visibility: hidden使分隔物隐形。

在font-size: 0还丢给divider删除空间它占据。

观看演示如下：

@media only screen and (max-width: 769px) { 
 
    .divider { 
 
    display: block; 
 
    visibility: hidden; 
 
    font-size: 0; 
 
    } 
 
}

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

来源

2017-09-15 15:02:41 kukkuz

这比我的回答更好的方法，我应该想到“能见度” –

你可以有2跨，而不是一个：

<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>

然后你的CSS是这样的：

@media only screen and (max-width: 769px) { 
    .header-description .divider-wide { 
     display: none; 
    } 
} 
@media only screen and (min-width: 770px) { 
    .header-description .divider-narrow { 
     display: none; 
    } 
}

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

来源

2017-09-15 15:02:50 yeahforbes

让家长更小，则最小的字，像这样的宽度：

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

这样就会迫使包裹词语的新线

来源

2017-09-15 15:03:11

介绍一个<br>下768pixels设备宽度

回答

相关问题