javascript - saltos - salto de linea html5
La etiqueta<pre> pierde saltos de línea cuando configura innerHTML en IE (5)
No sé si esto se ha sugerido antes, pero la solución que encontré para preservar espacios en blanco, líneas nuevas, etc. al hacer un innerHTML en una etiqueta ''pre'' es insertar otra etiqueta ''pre'' en el texto:
<pre id="pretag"></pre>
TextToInsert = "lots of text with spaces and newlines";
document.getElementById("pretag").innerHTML = "<pre>" + TextToInsert + "</pre>";
Parece que IE analiza el texto antes de hacer el innerHTML. Lo anterior hace que el analizador deje el texto dentro de la etiqueta adicional ''previa'' sin analizar. Tiene sentido ya que eso es lo que el analizador debe hacer. también funciona con FF.
Estoy usando Prototype''s PeriodicalUpdater para actualizar un div con los resultados de una llamada ajax. Según lo entiendo, el div se actualiza estableciendo su innerHTML.
El div está envuelto en una etiqueta <pre> . En Firefox, el formateo <pre> funciona como se esperaba, pero en IE, el texto termina en una sola línea.
Aquí hay un código de muestra que se encuentra aquí que ilustra el problema. En Firefox, abc está en línea diferente a def ; en IE está en la misma línea.
<html>
<head>
<title>IE preformatted text sucks</title>
</head>
<body>
<pre id="test">
a b c
d e f
</pre>
<script type="text/javascript"><!--
var textContent = document.getElementById("test").innerText;
textContent = textContent.replace("a", "<span style=/"color:red;/">a</span>");
document.getElementById("test").style.whiteSpace = "pre";
document.getElementById("test").innerHTML = textContent;
--></script>
</body>
</html>
Alguien sabe de una forma de evitar este problema?
Configurar innerHTML activa un analizador HTML, que ignora el exceso de espacio en blanco, incluidos los retornos duros. Si cambia su método para incluir la etiqueta <pre> en la cadena, funciona bien porque el analizador HTML conserva los retornos duros.
Puede ver esto en acción al hacer una fuente generada de vista después de ejecutar su página de muestra:
<PRE id="test" style="WHITE-SPACE: pre"><SPAN style="COLOR: red">a</SPAN> b c d e f </PRE>
Puede ver aquí que el retorno difícil ya no forma parte del contenido de la etiqueta <pre>.
También podría ser reescrito ''el camino de Python'', es decir:
el.innerText && el.innerText = val || el.innerHTML = val;
o podrías
if (el.innerText) {
el.innerText = val;
} else {
el.innerHTML = val;
}
En general, obtendrás resultados más consistentes al usar métodos DOM para construir contenido dinámico, especialmente cuando te preocupan cosas sutiles como la normalización del espacio en blanco. Sin embargo, si está configurado para usar innerHTML para esto, existe una solución alternativa de IE, que es usar el atributo outerHTML e incluir las etiquetas outerHTML .
if(test.outerHTML)
test.outerHTML = ''<pre id="test">''+textContent+''</pre>'';
else
test.innerHTML = textContent;
Esta solución y más discusión se puede encontrar aquí: Insertar una nueva línea en una etiqueta previa (IE, Javascript)