这是使用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 += '
};
pre.innerHTML = html;
HTML:
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
CSS:
pre {
border: 1px solid black;
height: 460px;
width: 320px;
white-space:pre-wrap;
}