Đặt chiều rộng thẻ PRE trong các trình duyệt web khác nhau

Question

Có cách để đặt độ rộng tab PRE trong Firefox và Opera, nhưng không có cách nào nổi tiếng để thực hiện việc này trong IE hoặc Chrome và mã được gắn thẻ cứng trong thẻ PRE bị như vậy.

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

CSS 3 chữ tính năng tab-size là quá mới (và không gần chuẩn đủ) đã nhìn thấy triển khai rộng cho đến nay (cộng với các tab không phải là rất phổ biến nói chung).

Đối với trường hợp mã có tab cứng, chỉ cần chạy mã thông qua chuyển đổi tab-to-dấu cách trước khi đặt nó trên trang.

bố trí cơ bản được thêm rất nhiều hữu ích hơn góc tròn

Tabs không bao giờ có ý định làm nhiệm vụ bố trí có mục đích chung (và sẽ là hoàn toàn không phù hợp cho điều đó). Có nhiều tính năng bố trí mạnh mẽ hơn được chào hàng cho CSS3 — xem ví dụ Grid và Flexbox trong IE10.

Answer 2

Theo trang tab-size MDN của, theo đúng định dạng là:

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

Javascript dự phòng:

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 
    }); 
});