介紹一個<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設備寬度

回答

相關問題