Using Css/js To Force Div To Width Of X Chars?

Question

I'm working on a page that recieves a large string, 500*500 characters (initially all spaces, ' '). I then render this with a monospace font into a

, with width and heig

Solution 1:

The problem does not occur when run as a SO snippet apparently.

My suspicion therefore is that the code as run elsewhere does not correctly set up a Doctype. SO snippets tend to have such 'missing bits' added automatically.

I have run the following code on Chrome/Edge/Firefox on Windows 10 and all give a 'vertical straight line' of As down the left hand side, ie the expected result.

However, if I remove the <!DOCTYPE html> Chrome and Edge layout mainly diagonally, with the odd 'blip' of two As vertically above each other. I suspect in those cases you are getting some additive rounding errors, but I can't prove it.

Baca Juga

In the StackOverflow environment, a doctype will be added so you don't see the problem.

Here's the code that runs OK outside the SO environment. Note the original given code has several errors ('none' is not OK value for padding or margin for example) but these did not affect the final result.

<!DOCTYPE html><html><head><style>:root {
      --pwidth: 500ch;
      --pheight: 500ch;
    }

   body {
      background-color: #111111;
      top: 0;
      padding: 0;
      font-family: Courier, monospace;
      font-size: 14;
      margin: 0;
      width: var(--pwidth);
      height: var(--pheight);
      height: auto;
      resize: none;
      display: block;
      white-space: break-spaces;
      overflow-wrap: anywhere;
      border: none;
    }
    #text {
      background: pink;
    }
</style></head><body><divid="text"></div><script>const textEl = document.querySelector('#text');
let str = '';
for (let i = 0; i< 500; i++) { str += 'A'; for (j = 0; j<499 ; j++) {str +=' '; }}
textEl.innerHTML = str;
</script></body></html>

JavaScript Controls

Using Css/js To Force Div To Width Of X Chars?

Solution 1:

Post a Comment for "Using Css/js To Force Div To Width Of X Chars?"