如何格式化一个适合宽度有限的设备(如iPhone)的长的<pre> HTML块

我有一个很长的预先块,我希望它是在移动浏览器,如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,但保持缩进?

 eg 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

Solutions Collecting From Web of "如何格式化一个适合宽度有限的设备(如iPhone)的长的<pre> HTML块"

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

演示: 的jsfiddle

脚本:

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

输出:

在这里输入图像说明

不是最理想的解决scheme,也可能不是您所寻找的解决scheme,但是这是一个解决scheme。 它使用jQuery用列表replace前块,因为列表在文本包装上保留缩进。

http://pastehtml.com/view/bj4d0az5r.html

或者你可以使用PHP(或类似的东西)。 例如:

检测使用的浏览器/平台:

 $browser = get_browser(null, true); print_r($browser); 

而对于移动操作系统,你可以使用带有wordwrapfunction的if / else语句来打破和显示你的内容。 例如:

 <?php $text = "A very long woooooooooooord."; $newtext = wordwrap($text, 8, "\n", true); echo "$newtext\n"; ?> 

这适用于每个移动浏览器,我已经尝试过所有的iOS和Android,如果你想屏幕截图让我知道。 所有需要的是一个CSS标签

 pre { word-wrap:break-word; } 

PRE将自动填充其容器。 只要你的容器的尺寸与屏幕宽度一致,并且没有溢出,这个工作就完美了(保留了string换行的缩进)。

Wordwrap的pre的内容,使你不超过固定。

 pre { width:100%; word-wrap:break-word; } 

这可能会解决您的问题。

您也可以将宽度更改为不超过iphone浏览器的固定宽度。 关键在于将文本包裹起来,这样就不会使shell元件的宽度大于屏幕。

恐怕没有办法做到这一点CSS,因为CSS没有像元素的实际文本内容那样的“知识”,比如领先的空间。 所以需要一些不同的方法。 如果您可以控制标记,则可以用包含单行div元素的div元素replacepre元素,其中class属性对应于所需的缩进级别。 然后你只需指定合适的左边距。 演示:

http://pastehtml.com/view/bjbgnb1v3.html

(该演示程序以ch单位设置左边距,但使用em单位作为合理备份。对于等宽字体,一个em接近两个字符的宽度。

这并不处理所有pre的function,所以如果需要保留一行中的多个空格,请添加white-space: pre-wrap

更合乎逻辑的方法是使用嵌套的div元素,以便嵌套深度对应于缩进级别。 这将使样式表简单,但标记看起来尴尬。

如果你不能控制HTML标记,你可能需要做一些事情客户端( pre元素转换为其他元素),类似于古代的build议代码。