Cómo formatear un bloque <pre> HTML largo adecuado para dispositivos de anchura limitada como iPhone

Aquí hay una manera de hacerlo con Javascript. Esto pasa por el <pre> y envuelve cada sección en un <div> con padding-left igual al número de espacios de indentación. En la demostración hice el tamaño de la <pre> el tamaño de una pantalla de iPhone para demostrar el envoltorio.

Manifestación:

Guión:

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

Salida:

No es la solución más ideal, y probablemente no la solución que estaba buscando, pero es una solución, sin embargo, que hace el trabajo. Utiliza jQuery para reemplazar el bloque previo con una lista, ya que las listas conservan sangrías en el ajuste de texto.

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

O usted podría utilizar PHP (o algo así). Por ejemplo:

Detectar qué navegador / plataforma se ha utilizado:

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

Y para los sistemas operativos móviles se puede utilizar una sentencia if / else con una función wordwrap para romper y mostrar su contenido. Por ejemplo:

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

Esto funciona en todos los navegadores móviles que he probado todos ellos en iOS y Android si desea capturas de pantalla me dejó saber. Todo lo que se necesita es una etiqueta css

 pre { word-wrap:break-word; } 

PRE llenará su contenedor automáticamente. Siempre y cuando su contenedor esté dimensionado para el ancho de la pantalla y no tenga desbordamiento, esto funciona perfectamente (conserva los sangrías a través de los saltos de línea con recubrimiento de palabras).

Wordwrap el contenido de la pre para que no exceda el fijo con.

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

Esto puede solucionar su problema.

Usted también podría cambiar el ancho a un fijo con no más ancho que el navegador del iphone. La clave es envolver el texto sin embargo para que no fuerce el ancho del elemento de la carcasa a ser más grande que la pantalla.

Me temo que no hay manera de hacerlo CSS, porque CSS no tiene "conocimiento" de cosas como el contenido textual real de un elemento, como los espacios principales. Así que se necesita un enfoque diferente. Si tiene control sobre el marcado, puede reemplazar el elemento pre por un elemento div que contenga elementos div una sola línea con atributos de class correspondientes a los niveles de sangría deseados. A continuación, sólo se especifican los márgenes adecuados de la izquierda. Manifestación:

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

(La demostración establece el margen izquierdo en unidades ch , pero utiliza una configuración en unidades em como una copia de seguridad razonable. Para una fuente monospace, una em está cerca del ancho de dos caracteres.)

Esto no maneja todas las características de pre así que si varios espacios en blanco dentro de una línea necesita ser preservado, agregue white-space: pre-wrap .

Un enfoque aún más lógico sería utilizar div elementos anidados para que la profundidad de anidación corresponde al nivel de sangría. Esto haría que la hoja de estilo simple, pero el marcado se vería incómodo.

Si no puede controlar el marcado HTML, es posible que necesite hacer las cosas en el lado del cliente (convertir el elemento pre a otros elementos), similar al código de la sugerencia de AncientMan.