<div style="background-color: black; color: white;"><pre>
C:\Windows\system32>wbadmin get items -version:01/25/2015-18:00
wbadmin 1.0 - Backup command-line tool
(C) Copyright 2012 Microsoft Corporation. All rights reserved.

Volume ID = {46a6263c-8cbc-11e4-93ed-806e6f6e6963}
Volume 'RECOVERY', mounted at <not mounted> ('RECOVERY', mounted at <not mounted
> at the time</pre></div>

Which would display as shown below:

C:\Windows\system32>wbadmin get items -version:01/25/2015-18:00
wbadmin 1.0 - Backup command-line tool
(C) Copyright 2012 Microsoft Corporation. All rights reserved.

Volume ID = {46a6263c-8cbc-11e4-93ed-806e6f6e6963}
Volume 'RECOVERY', mounted at <not mounted> ('RECOVERY', mounted at <not mounted
> at the time

But that will make the area with the black background extend across the entire page rather than only as far as the 80th character on the page, i.e., the "d" at the end of "mounted", which is where the line wraps in the command prompt window. I can add width: 80ch; to the style section to specify that I only want it to be 80 characters wide, i.e., I can use the following:

<div style="background-color: black; color: white; width: 80ch;"><pre>

The width of a character is judged to be the width of the zero character in the current font, but I've found that won't always work in all browsers and may give me an area that, though it doesn't now extend across the whole page when I don't want it to do so, may be too wide or too narrow depending upon the browser in which I'm viewing it. The above example is shown again below with the style information changed to include width: 80ch;.

C:\Windows\system32>wbadmin get items -version:01/25/2015-18:00
wbadmin 1.0 - Backup command-line tool
(C) Copyright 2012 Microsoft Corporation. All rights reserved.

Volume ID = {46a6263c-8cbc-11e4-93ed-806e6f6e6963}
Volume 'RECOVERY', mounted at <not mounted> ('RECOVERY', mounted at <not mounted
> at the time

When I view the page in Chrome version 39, the above div is wider than I want, i.e, it extends far beyond the "d" in "mounted", i.e., far beyond the 80th character. Though when I view it in Firefox 35, I see the width of the div extending only as far as the 80th character. If I view it with Internet Explorer, it is not wide enough, so I see the black area terminated after "mounted at <" with the followng "n" only partially visible and the rest of the line invisible.

Another option is to use display: inline-block;, instead, i.e., I can change the div line to be the following:

<div style="background-color: black; color: white; display: inline-block;"><pre>

The div section then displays the following when I've ended the line of text I want wrapped at the 80th character at that character:

C:\Windows\system32>wbadmin get items -version:01/25/2015-18:00
wbadmin 1.0 - Backup command-line tool
(C) Copyright 2012 Microsoft Corporation. All rights reserved.

Volume ID = {46a6263c-8cbc-11e4-93ed-806e6f6e6963}
Volume 'RECOVERY', mounted at <not mounted> ('RECOVERY', mounted at <not mounted
> at the time

The width of the black backround, i.e., the width of the div, extends only as far as the width of the longest element within it, which is the line I ended at the 80th character and works in all three browsers.

So I added the following line to the style.css file for the site:

.commandprompt { background-color: black; color: white; display: inline-block; }

So I can then use <div class="commandprompt"><pre> when I want a div, which will only contain text from a shell or command prompt window, to stretch only as far as to accomodate the longest element within it, which will be an 80 character line. So the div will stretch, or shrink, however you prefer to view it, to fit.

[/network/web/html/css] permanent link