Quiero mostrar un párrafo de la base de datos en una celda de la tabla.
El resultado es una línea 1 grande, ignorando cómo está organizada en la base de datos. ignorando 'entra' por ejemplo (nuevas líneas)
Quiero mostrarlo exactamente de acuerdo con cómo está escrito en la base de datos.
Por ejemplo, si el párrafo se guarda así:
hello ,
my name is x.
Quiero que se muestre exactamente así, en lugar de:
hello, myname is x.Respuestas:
Desea utilizar el CSS white-space:preaplicado al correspondiente <td>. Para hacer esto en todas las celdas de la tabla, por ejemplo:
td { white-space:pre }Alternativamente, si puede cambiar su marcado, puede usar una <pre>etiqueta alrededor de su contenido. De forma predeterminada, los navegadores web utilizan su hoja de estilo de agente de usuario para aplicar la misma white-space:preregla a este elemento.
El elemento PRE le dice a los agentes de usuario visuales que el texto adjunto está "preformateado". Al manejar texto preformateado, los agentes de usuario visuales:
- Puede dejar intactos los espacios en blanco.
- Puede representar texto con una fuente de paso fijo.
- Puede desactivar el ajuste automático de palabras.
- No debe deshabilitar el procesamiento bidireccional.
white-space: pre;se ignora cuando se aplica en una <td>etiqueta. Usar <pre></pre>para ajustar nuestro contenido funciona bien, pero debido al uso de esta tabla (exportar a Excel), los números grandes de columnas y filas aumentan el tamaño del archivo exportado y hacen que Excel se bloquee al leer el archivo. (extraño, lo sé). ¿Alguien más ha visto esto o tiene una idea para una solución?
style="white-space:pre-wrap; word-wrap:break-word"Esto solucionaría el problema de la nueva línea. pre etiqueta agregaría CSS adicional al requerido.
<pre>etiqueta hace todo tipo de cosas más allá de permitir caracteres de nueva línea, pero estas configuraciones de estilo solo resuelven el problema presentado.
Envuelva el contenido en una <pre>etiqueta (texto preformateado)
<pre>hello ,
my name is x.</pre>
Dos sugerencias para resolver este problema:
SOLUCIÓN 1: <div style="white-space:pre;">{database text}</div>o<pre>{database text}</pre>
Esta es una buena solución si su texto no tiene etiquetas html o propiedades css. También permite mantener pestañas por ejemplo.
SOLUCIÓN 2: Reemplazar \ncon<p></p> or <br/>
Esta es una solución si solo desea agregar líneas de ruptura, sin perder otras propiedades de texto o formato. Un ejemplo en php sería$text = str_replace("\n","<br />",$database_text);
También puede usar <p></p>o <div></div>, pero esto requiere un poco más de análisis de texto.
En su código del lado del servidor, reemplace las nuevas líneas ( \n) con <br/>.
Si está usando PHP, puede usar nl2br()
¡Hola, necesitaba hacer lo mismo! No preguntes por qué, pero estaba generando un html usando python y necesitaba una forma de recorrer los elementos de una lista y hacer que cada elemento tomara una fila propia DENTRO DE UNA ÚNICA CELDA de una tabla.
Descubrí que la etiqueta br funcionaba bien para mí. Por ejemplo:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>
item 1 <BR>
item 2 <BR>
item 3 <BR>
item 4 <BR>
</TD>
</TR>
</TABLE>
</BODY>Esto producirá el resultado que quería.
Utilizo la etiqueta de código html después de cada línea (ver más abajo) y funciona para mí.
George Benson </br>
123 Main Street </br>
New York, Ny 12344 </br>
el siguiente código funciona como magia para mí >>
td { white-space:pre-line }Si tiene una variable de cadena \nque desea poner dentro td, puede intentar
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>
white-spacees una propiedad de CSS 2.1 que es ampliamente compatible. Probado en IE8, funciona muy bien.