javascript – 如何格式化适用于宽限制设备(如iPhone)的长HTML块

a very long pre block start here here here here here here here here here here
    2nd line with intent
        3rd line with intent

e.g.
    a very long pre block start here here here here here here 
    here here here here
        2nd line with intent
            3rd line with intent

pre {
            white-space: pre-line;
        }

这是使用Javascript完成此操作的一种方法.这通过< pre>并在< div>中包装每个部分padding-left等于缩进的空格数.在演示中我制作了< pre>的大小.用于演示包装的iPhone屏幕的大小.

演示：

脚本：

var pre = document.getElementById( 'pre' ),sections = pre.textContent.trim().split( '\n' ),paddingPerChar = 9;

for( var index=0,html='',padding=0; index < sections.length; index++ ) {
    padding = ( sections[index].length - sections[index].trim().length ) *  paddingPerChar;
    html += '<div style="padding-left:' + padding + 'px;">' + sections[index].trim() + '</div>';
};

pre.innerHTML = html;

HTML：

<pre id="pre">
1. a very long pre block start here here here here here here here here here here
    A. 2nd line with indent long pre block start here here here here here here here here here
        a. 3rd line with indent
    B. 4th line th indent long pre block start here here here here here here here her
    C. 5th line
2. 6th Line
</pre>

CSS：

pre {
    border: 1px solid black;
    height: 460px;
    width: 320px;    
    white-space:pre-wrap;
}

输出：