Arthur B. Arthur B. - 5 months ago 15
CSS Question

Fill the browser window with random digits

I would like to fill the visible window in a webpage with random digits. The way I am currently trying to do this involves a long string of random digit first, and then using the following property on a div:

#mydiv{
font-family: "Inconsolata", monospace;
word-break: break-all;
font-size: 3em;
color: #202020;
height: 100%;
width: 100%;
overflow-y:hidden;
}


https://jsfiddle.net/4ztpbnm0/1/

It works(ish) on Chrome, but it takes a very noticeable amount of time to reflow after resizing the browser window. Is there any way to make this seamless?

Answer

Use overflow-wrap: break-word instead of word-break: break-all.

https://jsfiddle.net/746g71wb/

word-wrap was recently renamed to overflow-wrap, so to support other browsers you may want to specify both:

word-wrap: break-word;
overflow-wrap: break-word;

Possibly relevant Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=591793

Comments