Question

我的第一个问题是下面的代码没有按预期工作，任何简单的修复，所以我可以在jQuery中设置div元素的样式？

$('div').css({
  'display':'inline-block'
});

接下来我想通过使用像Consolas这样的相同宽度的字体并将所有文本16px然后将屏幕宽度除以16，我将能够在屏幕上显示文本而没有任何溢出。然而它没有用，它只达到了一半的屏幕。这是迄今为止的代码。

$('*').css({
  'font-family':'consolas',
  'font-size':'16px',
  'margin':'0',
  'padding':'0'
});

$(document).ready(function() {
  var windowWidth = $(window).width() / 16;
  for (var i = 0; i < windowWidth; i++) {
    $('body').append('<div>0</div>')
  }
});

Answer 1

可重用的微 jQuery插件，您可以在其中传递以下参数：

$("h1").lineOfChars("O", 26);      // Character, Font Size
$("#test1").lineOfChars("X", 60);
$("#test2").lineOfChars("t", 18);

body{margin:0;}

<h1></h1>
<div id="test1"></div>
<p id="test2"></p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
// Create a line of characters
$.fn.lineOfChars = function(ch, size) {

  var $ln = $("<span/>", {
      text: ch,                          // Insert our character
      appendTo: this,                    // Append to our plugin selector
      css: {fontSize: size, overflow:"hidden",textAlign:"center"}
    }),
    elW = this.innerWidth(),
    lnW = $ln.outerWidth(true),
    tot = Math.floor(elW/lnW),           // Calculate how many characters fit
    line = "";                           // Prepare empty string to hold all characters
  
  if(tot>0) while(tot--) line += ch;     // Concatenate characters
  $ln.css({display:"block"}).text(line); // Add all characters to our span

}
</script>

Answer 2

已编辑：指定了循环次数

使用for循环可以使用这个小提琴，有问题的字体不需要固定宽度。

var t = $('.wide'), // target div
  w = t.width(), // get container width or window size replace 't' with $(window)
  text = t.text(), // use existing div text as the template
  more = ''; // define the growing string

t.wrapInner("<span></span>"); // we can get the width of a span wrapped around text
var spans = t.find(':first'), // define the span variable
    count = Math.floor( w / spans.width() ); // work out how many times to repeat

for (var i = 0; i < count; i++) {
  more += text; // append to the string
  spans.text(more); // update the text
  $('.output').text('window width ' + w); // feedback
  $('.monitor').text('characters added ' + i); //feedback
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='wide'>0</div>
<div class='output'></div>
<div class='monitor'></div>

jQuery如何使用for循环使文本适合整个屏幕宽度？

2 个答案: