如何格式化适用于iPhone等宽度受限设备的长<pre> HTML块

Question

我有一个很长的预阻塞,我想让它在移动浏览器中查看,比如iPhone

例如

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

如何使wordwrap,但保留缩进？

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

我不希望有移动设备的滚动条,所以最好有一些方法来自动自动换行句子.

我尝试过的最类似的方法是使用CSS

 pre {
            white-space: pre-line;
        }

但不完全如我所愿,如上所示.

更新:链接: http ://pastehtml.com/view/bisxytioa.html

Answer 1

这是使用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;
}

输出: