Setting the width of the PRE tab in different web browsers

Question

There is a way to set the width of the PRE tab in Firefox and Opera, but in IE or Chrome there is no known way to do this, and as a result, the hard code in the PRE tags will suffer.

pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; -moz-tab-size: 1.5em; -o-tab-size: 1.5em; margin: 1em 0 0 0; padding: 1em 1em 1em 1em; width: 65%; } 

Answer 1

According to the MDN tab-size , the correct format is:

 tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; 

JavaScript error:

 var fix_tab_size = function(pre, size) { if(typeof fix_tab_size.supports === 'undefined') { var bs = document.body.style; fix_tab_size.supports = ('tab-size' in bs || '-o-tab-size' in bs || '-ms-tab-size' in bs || '-moz-tab-size' in bs); } if(!fix_tab_size.supports) { if(typeof pre.each === 'function') { //jquery $('pre').each(function() { var t = $(this); t.html(t.html().replace(/\t/g, new Array(size+1).join(' '))); }); } else if(typeof pre.innerHTML === 'string') { pre.innerHTML = pre.innerHTML.replace(/\t/g, new Array(size+1).join(' ')); } } } $(function() { fix_tab_size($('pre'),4); //or $.getJSON(src, function(data) { fix_tab_size($data_pre.html(data.code)); //etc }); }); 

Answer 2

The CSS 3 Text tab-size function is too new (and almost non-standardized) to see widespread deployment so far (plus tabs are not very popular in general).

For hard-tabbed code, just run it with the tabs-to-spaces transform before placing it on the page.

Basic layouts are much more useful than rounded corners.

Tabs were never intended for general purpose tasks (and would be completely unsuitable for this). There are more powerful layout features designed for CSS3 - see, for example, Grid and Flexbox in IE10.