jQuery在div中的最大字符數

-3

我正在尋找一種方法來填充單個字符的div。 div應該是視口的寬度。我與寬度：jQuery在div中的最大字符數

$(window).width();

JS應該建立一個像這樣的HTML代碼：

<div id="text">ccccccccccccccccccccccccccccccccccccccccc</div>

感謝您的投入。

來源

2016-03-01 MaxMara

你使用固定寬度的字體嗎？ – j08691

你的意思是'$（「div」）。width（）'獲得寬度嗎？ – CMedina

說實話 - 沒什麼。我不知道如何開始。我只知道我想要擁有什麼。 – MaxMara

因爲字符大小可以是固定的或不accordig到字體我建議使用函數來字符的數目近似於打印：

function writeMaxNumCharsInOneLine(textObj, charToWrite) { 
 
    var innWidth = textObj.innerWidth(); 
 
    textObj.append('<span id="charSize" style="visibility: visible; white-space: nowrap;">' + charToWrite + '</span>'); 
 
    var charSize = $('#charSize').width(); 
 
    var numCharsToWrite = (innWidth/charSize).toFixed(0); 
 
    var strToWrite = charToWrite.repeat(numCharsToWrite); 
 
    $('#charSize').text(strToWrite); 
 
    charSize = $('#charSize').width(); 
 
    while (charSize < innWidth) { 
 
    strToWrite = strToWrite + charToWrite; 
 
    $('#charSize').text(strToWrite); 
 
    charSize = $('#charSize').width(); 
 
    } 
 
    if (charSize > innWidth) { 
 
    strToWrite = strToWrite.slice(0,-1); 
 
    } 
 
    $('#charSize').remove(); 
 
    textObj.text(textObj.text() + '\n' + strToWrite); 
 
} 
 
$(function() { 
 
    writeMaxNumCharsInOneLine($('#text'), 'Y') 
 
    writeMaxNumCharsInOneLine($('#text'), 'a') 
 
    writeMaxNumCharsInOneLine($('#text'), 'b') 
 
    writeMaxNumCharsInOneLine($('#text'), 'c') 
 
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 

 
<div id="text" style="border: double;width: 50%;height: 100px;"></div>

來源

2016-03-01 16:01:29 gaetanoM

這非常好 - 謝謝@gaemaf - 所以我不必使用等寬字體。 – MaxMara

您的意思是？

$(function() { 
 
    var windowWidth = $(window).width(); 
 
    var oneCharacterWidth = $("#text").width(); 
 
    var total = windowWidth/oneCharacterWidth;  
 
    $("#text").html("");  
 
    for (i = 0; i < total; i++) { 
 
    $("#text").append("c"); 
 
    } 
 
})

#text { 
 
    display:inline; 
 
    font-size:12px; 
 
    } 
 

 
body { 
 
    margin:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="text">c</div>

來源

2016-03-01 15:24:44 NiZa

是的，那很完美。 '$（「＃text」）。width（）;'真的很有幫助 - 也很簡單。不知道爲什麼我沒有發現。謝謝！ – MaxMara

@NiZa你知道爲什麼總有一個空間在右側嗎？ – MaxMara

@MaxMara爲什麼你選擇這個作爲接受，如果它不適合任何人，並留下一方的差距？ – j08691

這裏有一個辦法做到這一點：

var char = 'i'; 
 
$('#text').html($('#text').html() + char) 
 
var initialheight = $('#text').height(); 
 

 
while ($('#text').height() === initialheight) $('#text').html($('#text').html() + char) 
 
$('#text').html($('#text').html().slice(0,-1))

#text { 
 
    word-break: break-all; 
 
    font-size: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="text"></div>

這種工作方式是腳本插入字符INT div和獲取高度。然後重複添加字符，直到高度發生變化，這表示發生了多條線。然後修剪導致它溢出到兩行的最後一個字符。它獨立於任何字體特徵。

來源

2016-03-01 15:40:12 j08691

下次您可能想要添加更多信息以及您嘗試過的內容時，您的問題不會在您身邊顯示多少疑難解答;不過我認爲下面的代碼應該能夠工作，或者幫助你找出你想要做的事情。

var w = $(document).width(); 
var d = $("#text").width(); 
var s = ""; 

do{ 
    s+= "X"; 
    $("#text").text(s) 
    d = $("#text").width(); 
} 
while(d < w) 

<div> 
<span id="text"></span> 
</div>

來源

2016-03-01 15:44:02 Blindsyde

好的，謝謝 - 下一次我試着更具體，寫更多的文字。這對我來說並不容易，因爲我的英語非常糟糕。 :( – MaxMara

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function() { 
     var b=$("<span padding=0 margin=0></span>").appendTo($("#text")); 
     do { 
      $(b).append("M"); 
     } while ($(b).width() < $(b).parent().width()) 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="text"></div> 
<button>Click me</button> 
</body> 
</html>

來源

2016-03-01 15:53:14 Caesar

jQuery在div中的最大字符數

回答

相關問題