欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何讓文字自動溢出到兩欄中

錢淋西2年前9瀏覽0評論

我目前正在開發一個網站,我的客戶希望各種文章的文本溢出到兩個欄中。有點像報紙上的?所以看起來像是:

Today in Wales, someone actually      Nobody was harmed in
did something interesting.            the incident, although one 
Authorities are baffled by this       elderly victim is receiving
development and have arrested the     counselling.
perpetrator.

有沒有辦法只用CSS就能做到?我不希望必須使用多個div。我也愿意使用JavaScript,但是我真的不擅長這個,所以希望能得到幫助。我在想也許JavaScript可以計算出有多少& ltp & gt在內容div中有,然后移動它們的后半部分,使其在此基礎上向右浮動?

好消息是有一個僅使用CSS的解決方案。如果實現的話,應該是這樣的:

div.multi {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

我可能會在你的后臺處理它,不管那是什么。PHP中的一個例子可能是這樣的:

$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);

用InnerHTML在JavaScript中做一些類似的事情應該是可能的,但我個人會避免這種情況,因為越來越多的人使用像NoScript這樣的插件來禁用JavaScript,直到它被明確允許用于x站點,而且最重要的是,div和CSS被設計成可以很好地降級。在這種情況下,JavaScript解決方案的性能會嚴重下降。

這里有一個JQuery插件,它可以自動顯示列,甚至可以根據屏幕大小改變列數。

我自己還沒用過這個,但是來看看吧。

如果你正在使用Mootools,你可以查看MooColumns。

首先,我不認為僅僅是css可以做到這一點,但我希望被證明是錯誤的。

第二,僅僅計算段落對你沒有任何幫助,你至少需要所有的高度,并基于此計算文本的中間高度,但是你必須考慮窗口的大小調整等等。我不認為有一個合理簡單的現成解決方案。不幸的是,我對找到這個問題的完美解決方案感到悲觀,但這是一個有趣的問題。

這在HTML/CSS/JS中很難實現是有原因的(雖然我確信這是可能的)。

報紙使用多列來減少行寬,使文本更具可讀性。這在紙上是沒問題的,因為當你完成一個專欄時,你會把眼睛轉到下一個的開頭。

在web上,我們使用滾動來允許文本越過屏幕邊界,因此不需要分欄。

這在僅支持Mozilla的CSS擴展中得到支持:-moz-column-count。參見:https://developer.mozilla.org/en/CSS3_Columns