colums中的文本重疊;列之間的力間距？

當使用我的瀏覽器縮放功能縮放時，有時文本會在其他元素上出現，其中的一個例子是製作列時的示例。colums中的文本重疊;列之間的力間距？

HTML

<div id="columnContainer"> 
    <div class="column"> 
     SingleWord <br/> 
     Long Word <br/> 
     Word 
    </div> 
    <div class="column"> 
     Even Longer Word <br/> 
     Word <br/> 
     Word 
    </div> 
</div>

的.css

#columnContainer{ 
    padding: 0.5em; 
    margin: 0 auto; 
} 
.column { 
    float: left; 
    width: 20%; 
    margin: 0; 
}

Fiddle。嘗試放大（ctrl和+/-），你會看到「SingleWord」超出列並爬入下一個。爲了獲得更好的可視性，請將border: 2px solid black;添加到.column。

我該如何製作這些列：a）拉伸以適應不考慮縮放級別的內容; b）當放大得足夠遠時，其他列的內容不會滲入另一列。我不希望行被分割（例如，一旦放大，「Long Word」就會分裂成兩個詞，當這不是我想要的），我不想讓事情超出他們的範圍定義的約束。

來源

2014-07-19 gator

雖然您已給出了.column的20%的寬度。它的寬度爲20%，寬度爲parent元素。對於上述問題，可以嘗試word-wrap: break-word;

.column { 
    float: left; 
    width: 20%; 
    margin: 0; 
    word-wrap: break-word; 
}

來源

2014-07-19 21:31:25 amol

是的，父div具有任意寬度：列是該寬度的20％。我不太確定，如果我正在尋找訣竅，它會在我試圖找到一種方法來防止這種分裂時分裂這個詞。 – gator

如果您不想拆分單詞，則可以使用媒體查詢來選擇減小字體大小。檢查這個鏈接http://jsfiddle.net/amoljawale/F6DCb/1/ – amol

一個CSS功能，是「免疫」於變焦是視臺（VW，VH，最小值，和Vmax）。這些在現代瀏覽器中支持，對於較舊的瀏覽器，您可以獲得墊片：http://html5polyfill.com/。這是一個小提琴：http://jsfiddle.net/8hQP2/。

#columnContainer{ 
    padding: 0.5em; 
    margin: 0 auto; 
    font: normal 2.8vh/1.2 Sans-Serif; 
}

來源

2014-07-19 22:13:15 DRD

colums中的文本重疊;列之間的力間距？

回答

相關問題