Question

我正在寻找一种用单个字符填充div的方法。 div应该是视口的宽度。我得到宽度：

$(window).width();

JS应该像这样构建一个HTML代码：

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

感谢您的投入。

Answer 1

这是一种方法：

＆＃13;

var blur = 50;
var r = 50;

var r2 = r + blur;

ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
ctx.shadowBlur = blur;
ctx.shadowColor = 'black';

ctx.beginPath();
ctx.arc(-r2, -r2, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

＆＃13;

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))

＆＃13;

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

＆＃13;

这种方法的工作方式是脚本在div中插入一个字符并获取高度。然后重复添加字符，直到高度发生变化，这表示发生了多行。然后它修剪导致它溢出到两行的最后一个字符。它独立于任何字体特征。

Answer 2

你是说这个？

is used to get the bucket which is a list in the map while

$(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;
  }

Answer 3

下次您可能想要添加更多信息以及您尝试过的内容时，您的问题并没有显示出很多问题;但是我认为下面的代码可以起作用或帮助你弄清楚你想要做什么。

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>

Answer 4

<!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>

Answer 5

因为字符大小可以修复或不符合字体我建议使用函数来估算要打印的字符数：

＆＃13;

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')
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


<div id="text" style="border: double;width: 50%;height: 100px;"></div>

＆＃13;

jQuery div中的最大字符数

5 个答案: