jsf - outputtext - outputlabel salto de linea
h: outputText no divide / r / n caracteres en nuevas lĂneas (3)
Tengo texto en una variable String
que contiene retornos de carro y nuevas líneas /r/n
.
text = "Text1/r/nText2/r/nText3";
Lo presento usando un <h:outputtext>
.
<h:outputText value="#{bean.text}" />
Pero no reconoce los nuevos caracteres de línea y muestra lo siguiente en webbrowser.
Text1 Text2 Text3
¿Por qué <h:outputText>
no se <h:outputText>
/n
en nuevas líneas?
¿Que debería hacer? ¿Debo reemplazar /n
con <br />
?
Este es un comportamiento normal, en HTML, los espacios en blanco consecutivos, como espacios y saltos de línea, se normalizan, por lo que se muestran como un único espacio. Obtendrá la misma pantalla si incluyó el texto con saltos de línea directamente en la fuente HTML. Para respetar los saltos de línea en el resultado, debe envolver el texto en etiquetas pre
o aplicar una clase de hoja de estilo:
<pre><h:outputText value="..."/></pre>
<div style="white-space: pre-wrap"><h:outputText value="..."/></div>
Para otros posibles valores para el atributo de white-space
consulte esta página: http://www.w3schools.com/cssref/pr_text_white-space.asp
Las respuestas anteriores me causaron problemas para grandes cantidades de texto, como salida extremadamente amplia (sin texto), que style="white-space: pre-wrap"
no solucionó; o simplemente muestra el <br/>
como texto, no como un final de línea.
Al final, utilicé el componente h:inputTextarea
para mostrar el texto y lo convertí en "solo lectura", que funcionó directamente sin reemplazar los saltos de línea, ni tuvo que usar los estilos extra o styleClasses. Y, es redimensionable para satisfacer las necesidades del usuario, lo cual es una ventaja.
<h:inputTextarea cols="70" rows="10" readonly="true" value="#{bean.text}" />
Para pequeñas cantidades de texto, encontré la opción de ajuste pre-wrap
, como lo sugirió henko arriba, para que funcione bien.
Los saltos de línea en HTML están representados por el elemento <br />
, no por el carácter /n
. Aún más, abra el código fuente HTML promedio haciendo clic con el botón derecho, Ver fuente en el navegador y verá " /n
todo el lugar. Sin embargo, no se presentan como tales en la presentación HTML final. Solo el <br />
hará.
Entonces, sí, debes reemplazarlos por <br />
.
<h:outputText value="#{fn:replace(bean.text,''/n'',''<br/>'')}" escape="false" />
Nota: cuando se utiliza Apache EL en lugar de Oracle EL, escaque dos veces la barra como en //n
.
Sin embargo, esto es feo y el escape="false"
hace sensible a los ataques XSS si el valor proviene de la entrada del usuario final y no lo sanitize antemano. Una mejor alternativa es establecer la propiedad CSS white-space
para preformatear en el elemento principal. Si desea envolver líneas dentro del contexto de un elemento de bloque, configure pre-wrap
ajuste pre-wrap
. O si también desea colapsar espacios y pestañas, configure pre-line
.
P.ej
<h:outputText value="#{bean.text}" styleClass="preformatted" />
.preformatted {
white-space: pre-wrap;
}