確定要放在div中的文本的數量以最大化最後一行的寬度

爲了便於閱讀，我製作了自己的csscolumn（css3）polyfill腳本將文本分成兩列。這不是一個需要參數的動態腳本，而是針對我現在正在工作的站點量身定製的。確定要放在div中的文本的數量以最大化最後一行的寬度

它工作正常，除了第一列中最後一行文本的一個問題。在某些情況下，只有一個單詞在第一列的最後一行顯示，其餘文本進入第二列，句子繼續。換句話說，句子中的空白太多會在column1和column2之間出現中斷。例如：

Column 1. Lorem ipsum dolor sit amet, sentence continued after break in first column. 
consectetur adipisicing elit, sed do etc etc etc etc etc etc etc etc etc etc etc 
sentence         etc etc etc etc etc etc etc.

我認爲這需要通過使用height，width和每一列的line-height（都將具有相同的寬度，49％）來實現。

我的邏輯至今是：

找到字符串中的中間索引位置
搜索下一個空白，其中的文本將被分割
，然後約各執一個空白文本在中間

我沒有運氣使用現有的polyfills這個問題。然後，我使用Columnizer，在那裏我遇到了一個錯誤，當我的字符數不足450時，第一列空了。所以我在我的隔間裏尖叫着「F @ ** it !!我們會活下去！」。我不想在簡單的文章文字上使用ul li任何可怕的語義。

但是，如果有更好的腳本來解決這個問題，那麼我將爲此作爲答案。

我的簡化代碼：

$('.article-body').each(function (index) { 
if ($(this).text().length > 300) { 

    var text = $(this).text(); 
    var length = $(this).text().length; 

    var col1 = null; 
    var col2 = null; 

    if (text[Math.floor(length/2)+14].trim() === '') { 
    col1 = text.slice(0, Math.floor(length/2)+14).trim(); 
    col2 = text.slice((Math.floor(length/2))+15, length).trim(); 
    } 
    else { 
    loop1: 
    for (var i = Math.floor(length/2)+14; i <= length; i++) { 
     if (text[i].trim() === '') { 

     col1 = text.slice(0, i).trim(); 
     col2 = text.slice(i+1, length).trim(); 

     $(this).empty(); 
     $(this).append("<div class='first-column'>"+col1+"</div>"); // Column 1 
     $(this).append("<div class='second-column'>"+col2+"</div>"); // Column 2 

     break loop1; 
     } 
    } 
    } 
}

來源

2014-01-31 gorn

我不知道，這種做法失去一切格式化文本信息，包括段落，不是嗎？看看div中的段落並在靠近中間的段落中分裂會不會更好？根據我的經驗，網絡上的文章由很多小段落組成。在一篇相當長的文章中，在段落中斷時，列長度的小差異不應成爲問題。 –

問題在於第1列最後一行的句子太早;在第2列中恢復之前。換句話說：句子中的空白在column1和column2之間過多。 – gorn

我明白你的問題是什麼。但我不明白你爲什麼用「.text（）」「整頓」整個文本並丟失所有格式。 –

將文章分解爲文字。然後創建兩列div並將文章文本添加到第一個度量高度。然後清空第一個div，然後逐漸填充單詞，直到div的高度大約是具有完整內容的列div高度的一半。將所有單詞放在第一個div中的當前單詞中，其餘單詞放在第二個單元格中。

這似乎工作得很好，因爲瀏覽器正在打破分詞。它僅適用於不可重現的列。我認爲它足夠快，我已經在一個頁面上用各種文章div進行了測試。檢查單詞換行時，您可以從中間開始整齊。（我意識到Mabedan的回答採用了類似的做法，但它似乎並沒有考慮到的話，只是個字符）。

下面的代碼：

$().ready(function() { 
    $('.article-body').each(function(index) { 

    // get text as words 
    var text = $(this).text(); 
    var words = text.split(" "); 

    // prepare columns 
    var col1 = $('<div class="first-column">'); 
    var col2 = $('<div class="second-column">'); 

    $(this).empty(); 
    $(this).append(col1); 
    $(this).append(col2); 

    // calculate div metrics 
    $(col2).text(text); 
    var height = $(col2).height(); 
    var middle = Math.ceil(0.5 * height); 

    // fill col1 with words until it overflows 
    var start = Math.floor(0.3 * words.length); 
    var line = words.slice(0, start).join(' '); 

    for (var i = start; i < words.length; i++) { 
     var w = words[i]; 

     if (line) line += " "; 
     line += w; 

     $(col1).text(line); 
     if ($(col1).height() > middle) { 
      $(col1).text(words.slice(0, i).join(' ')); 
      $(col2).text(words.slice(i).join(' ')); 
      return; 
     } 
    } 

    // not enough text: just fill col1 
    $(col1).text(words.join(' ')); 
    $(col2).text(''); 

    }); 
});

來源

2014-01-31 15:26:53

這就是我將如何解決這個問題。我將補充說明，在計算過程中，您可以將列的絕對位置設置爲負的左側值（屏幕外），以便用戶看不到視覺計算，而您仍然可以測量高度。 – cbayram

我想出了這樣的事情，這是可怕的。但可能會給你一些進一步調查的想法。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script> 
    <script type="text/javascript"> 
    document.setText = function() { 
     var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", 
      divs = $("div"), 
      position = Math.round(text.length/2), 
      divToEnlarge, 
      initialFirstDivHeight, 
      initialSecondDivHeight, 
      incrementFactor; 

     function setText() { 
      divs.eq(0).text(text.slice(0, position)); 
      divs.eq(1).text(text.slice(position)); 
     } 
     setText(); 
     initialFirstDivHeight = divs.eq(0).height(); 
     initialSecondDivHeight = divs.eq(1).height(); 

     divToEnlarge = initialFirstDivHeight > initialSecondDivHeight ? 1 : 0; 
      incrementFactor = divToEnlarge === 0 ? +1 : -1; 
     for (;;) { 
      position += incrementFactor; 
      setText(); 
      if (divs.eq(divToEnlarge).height() > initialFirstDivHeight) { 
       position -= incrementFactor; 
       setText(); 
       return; 
      } 
     } 
    } 
    </script> 
    <style type="text/css"> 
    div { 
     display: inline-block; 
     width: 50%; 
    } 
    button { 
     display: block; 
    } 
    body { 
     margin: 0; 
    } 
    </style> 
</head> 
<body> 
<button onclick="document.setText()"></button> 
<div></div><div></div> 
</body> 
</html>

來源

2014-01-31 11:13:41 Mabedan

確定要放在div中的文本的數量以最大化最後一行的寬度

回答

相關問題