在2列布局中截斷的文本

Question

我正在使用以下代碼來允許文本流到第二列。一切都很好，除了在第一列的底部切掉字母的頂部，其餘部分出現在第二列的頂部。

.two-column-flow { 
column-count: 2; 
column-gap: 20px; 
-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
height: 150px; 
padding-bottom: 10px; 
} 

單擊頁面左側的「功能」選項卡，然後查看「娛樂」部分查看我在說什麼。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

任何幫助是極大的讚賞:)

Answer 1

我剛剛檢查Windows上的Chrome，Firefox和IE這個問題產生不同的結果 - 就像你所描述的，在IE瀏覽器中的文本是在Chrome切斷（最後兩行 - 「遊戲室」和「VCR」），在Firefox中，2列只顯示爲一列，整個副本應顯示在第二列「娛樂「覆蓋下面」通信「部分的副本，最後一個覆蓋」寬帶接入「的條目」VCR「。
我能解決這個問題的兩個調整上述所有的瀏覽器：去除「display:inline-block;」爲「.text-wrap」（style.css文件中的線351），並在style.css中增加height:150px;到height:200px;類「.two-column-flow」（行109 ）。
因爲我不知道這些樣式是否在網站的其他地方使用，我不確定這些調整是否會導致其他問題，但如果這樣可以解決當前問題，則可以將特定類添加到娛樂部分，並只將這些變化應用於此類。

更新：對於第一行文本不一致的後續問題，我剛剛找到了一個解決方案（再次 - 「只」在Windows Firefox，Chrome和IE上測試） - 改變類的填充。文本換行（在style.css文件線351）：

.text-wrap 
{ 
    padding: 0 2% 30px; 
} 

到

.text-wrap 
{ 
    padding: 0 0 30px; 
} 

則第一行被顯示再次對準。
如前所述，我不確定您網站上其他版塊可能帶來的後果，因此可以考慮應用所有更改來解決2列版式的問題，例如，具有兩個類.text-wrap和.pre-wrapped-text部分（用於完整性那將會.text-wrap.pre-wrapped-text沒有空格）或到.two-column-flow .text-wrap（具有.text-wrap類，並且元件相.two-column-flow類兒童=元素）。

雖然我在檢查這個問題時，我只注意到Internet Explorer上的另一個問題 - 您的 header .ribbon是「破損」，這意味着「關於我們聊天我的帳戶」導航不顯示在主導航上方的一行中，但在右側上方 - 「聯繫」，「聊天」上方的「聯繫」和「我的帳戶」重疊的「關於我們」。這可以很容易地解決 - 這是由IE無法處理的設置width: initial;造成的。爲了解決這個問題，並且不會對其他瀏覽器造成任何問題，只需在width: initial;之前加上width: auto;即可。 IE識別width: auto;並且導航是固定的，其他瀏覽器 - 識別兩個寬度設置 - 將忽略第一個寬度設置並使用width: initial;。這適用於2個設置：header .ribbon（第42行）和.ribbon ul（第47行）。作爲例子爲header .ribbon（意味着要取代所有不，只需添加width: auto;）：

header .ribbon 
{ 
    width: auto; // for IE 
    width: initial; // for the rest, will be ignored by IE 
} 

至於提到的IE發出參考：use initial width for element not working in IE