如何防止跨度進入下一行 - 響應式網頁設計？

按照簡單的列表，在每個h4中，最後有一個跨度。如何防止跨度進入下一行 - 響應式網頁設計？

<ul class="items"> 
    <li> 
     <h4>Prevent LineBreakOfPlus <span class="goto">o</span> 
     </h4> 
    </li> 
    <li> 
     <h4>Digital Signage <span class="goto">o</span></h4> 
     …  

</ul>

截圖頁面的源：

enter image description here

爲span的CSS看起來像這樣...

.items .goto { 
    font-family: 'QuaySans-Icons'; 
    font-size: 1.6em; 
    position: relative; 
    float: right; 
}

的最後一件事是這樣的：

enter image description here

我有這樣的問題是，降低瀏覽器窗口的寬度時，（我工作的一個負責任的網頁設計）的span -icon是闖入下一行。

enter image description here

你有關於如何防止這種情況發生的任何創造性的解決方案或想法？

親切的問候，並感謝你在前進，馬特

來源

2013-04-09 matt

可以「預防」和「LineBreakOfPlus」可以出現在2行。或者它應該只是一條線。 – 2013-04-09 14:08:42

你可以把這個變成一個jsfiddle請 – Richlewis 2013-04-09 14:11:52

@MaheshSapkal它可以分成兩行。但是，如果是這樣的話，加號不應該與第二行分開。 – matt 2013-04-09 14:21:14

如果你想保持內嵌的最後一個字在你的文本行的圖標，你可以簡單地做：

<ul class="items"> 
    <li> 
     <h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4> 
    </li> 
    <li> 
     <h4>Digital Signage<span class="goto">o</span></h4> 
    </li> 
</ul>

和CSS可能是：

.items { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.items li { 
    border-bottom: 1px solid gray; 
    margin: 0; 
    padding: 0; 
} 
.items h4 { 
    margin: 0; 
} 
.items .goto { 
    background-color: gray; 
    font-size: 1.6em; 
    margin-left: 10px; /* optional */ 
}

如果您的工作和span之間沒有空格，主題將只需按照字如果li元素被迫流入到第二線。

您可以使用margin-left來創建視覺間隔或在span之前插入一個&nbsp實體，其實現方式很多。細節取決於你想要的效果。

小提琴：http://jsfiddle.net/audetwebdesign/VsBet/

飼養圖標右對齊

這裏（如何做到這一點的兩個例子）是一種方法來牽制的圖標h4元素的右邊：

.ex2.items h4 { 
    position: relative; 
    line-height: 1.5; 
    outline: 1px dotted blue; 
    padding-right: 2.00em; 
} 
.ex2.items .goto { 
    background-color: wheat; 
    line-height: 1.00; 
    font-size: 1.6em; 
    position: absolute; 
    right: 0; 
    bottom: 0.0em; 
    height: 1.00em; 
    width: 1.00em; 
    outline: 1px dotted red; 
}

使用絕對定位span將其保留在h4的右側和底部。如果h4形成一行，則圖標將沿着第二行。您可能需要根據圖標大小調整定位。如果允許圖標的大小增加，在極端情況下可能會遇到其他問題。我可能會將圖標固定爲px高度或寬度（或最大值）。最後，在h4中設置一些padding-right，以防止窗口變小時圖標與文本重疊。

注意我明確指定行高值來強調不知道圖標高度的問題。您可能需要調整這些以垂直放置圖標。

來源

2013-04-09 14:32:33

降低您的字體大小，當你有更小的空間。我想你在媒體上有max-width：480px的問題。我發現減小字體大小一個很好的選擇，以保持設計一致的響應網站

來源

2013-04-09 14:28:15 LKallipo

我在演示中嘲笑它，但它有點粗糙。

.items { 
    padding:0; 
    margin:0; 
    /*width:180px;*/ 
} 
.items li { 
    border: 1px solid red; 
    list-style-type: none; 
    position: relative; 
} 
.items h4 { 
    margin:0; padding:0; font-size:16px; padding-right:10px; 
} 

.items .goto { 
    margin-top: -10px; 
    position: absolute; 
    right: 0; 
    top: 50%; 
}

DEMO

查看以下鏈接，減少瀏覽器的寬度。

RESULT

來源

2013-04-09 14:36:08

如何防止跨度進入下一行 - 響應式網頁設計？

回答

相關問題