如何格式化适用于iPhone等宽度受限设备的长 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

这是使用Javascript完成此操作的一种方法。 这将通过


并在

包装每个部分,其中padding-left等于缩进的空格数。 在演示中,我制作了


大小的iPhone屏幕来演示包装。

演示: 的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 += '
' + sections[index].trim() + '
'; }; 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; } 

输出:

在此处输入图像描述

不是最理想的解决方案,也可能不是您正在寻找的解决方案,但它确实是一个解决方案。 它使用jQuery用列表替换pre块,因为列表保留了文本换行的缩进。

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

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

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

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

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

  

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

 pre { word-wrap:break-word; } 

PRE将自动填充其容器。 只要您的容器的大小与屏幕的宽度相同并且没有溢出,这就完美地工作(在单词换行符中保留缩进)。

Wordwrap pre的内容让你不要超过固定的。

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

这可能会解决您的问题。

您也可以将宽度更改为固定,而不是比iPhone浏览器更宽。 关键是要包装文本,以便它不会强制shell元件的宽度大于屏幕。

我担心没有办法做CSS,因为CSS没有“知识”的东西,比如元素的实际文本内容,比如前导空格。 因此需要一些不同的方法。 如果您可以控制标记,则可以使用包含单行div元素的div元素替换pre元素,其中class属性对应于所需的缩进级别。 然后你只需指定合适的左边距。 演示:

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

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

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

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

如果您无法控制HTML标记,则可能需要在客户端执行操作(将pre元素转换为其他元素),类似于AncientMan建议中的代码。