Cómo mostrar texto de varias líneas en una celda de tabla

119

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.

html css tablerow Sombreado
fuente

164

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.

Phrogz
fuente

Pulgares arriba, white-spacees una propiedad de CSS 2.1 que es ampliamente compatible. Probado en IE8, funciona muy bien.

leesei

Ahora estoy en una situación en la que 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?

JoeBrockhaus

1

Esta solución está lejos de ser perfecta. El resultado es que Excel produce varias líneas para las celdas que tienen saltos de línea. La única respuesta correcta se puede encontrar aquí: bennadel.com/blog/…

Elmue

55

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.

Jajikanth pydimarla
fuente

1

Esta es una buena solución específica. La <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.

moveson

Tuve un problema en el que mis datos contienen una nueva línea. Otra solución como reemplazar texto con <br/> o <div> o <pre> se trataba solo como texto. Esta solución funciona perfectamente superando ese problema.

Anshuman Goel

¡¡Fantástico!! Esto funciona muy bien para mí. ¡Tenía una JDataTable que enumeraba varios textos y necesitaba css para ajustar el texto correctamente! Ahorrador de día ¡Muchas gracias!

PatsonLeaner

1

Esto funciona para mí en términos de preservar los saltos de línea, pero agrega un salto de línea en la parte superior de cada celda ... ¿alguna solución?

jtr13

30

Envuelva el contenido en una <pre>etiqueta (texto preformateado)

<pre>hello ,
my name is x.</pre>

Joyce Babu
fuente

3

Sin embargo, esto sobrescribe la fuente con espacio único.

hardmooth

23

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.

Daniel Vila Boa
fuente

7

En su código del lado del servidor, reemplace las nuevas líneas ( \n) con <br/>.

Si está usando PHP, puede usar nl2br()

Cohete Hazmat
fuente

6

¡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.

chumbaloo
fuente

5

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>

René
fuente

2

debería ser un comentario, no una respuesta.

Deep Sharma

<br> rompe la semántica de la tabla. Al visualizar la tabla con un navegador basado en texto, las nuevas líneas se muestran como filas de la tabla.

JAT86

3

el siguiente código funciona como magia para mí >>

td { white-space:pre-line }

Sumon Bappi
fuente

1

Agregué solo <br>dentro del <td>y funciona bien, ¡rompa la línea!

Zvi
fuente

0

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>

Eugene Ihnatsyeu
fuente

Cómo mostrar texto de varias líneas en una celda de tabla

Respuestas: