4

Estoy creando un archivo html para una firma de correo en Thunderbird y me pasaron un texto entre etiquetas <pre> que no consigo colocar, ya que me aparece alineado a la derecha en vez de estar alineado a la izquierda contra el logo, dejando un espacio vacío.

<table cellspacing="0" cellpadding="0" style="font-family: Arial, sans-serif; font-size: 12px; padding-left: 40px;" valign="top" >
    <tr>
        <td style="vertical-align: middle; padding-left: 1px; ">
            <img src="http://logo.com/logo.png" alt="Logo" style="height: 80px; width: 80px;">
        </td>

        <td style="vertical-align: top; text-align: left;">
          <div style="display: flex; align-items: flex-start;">
            <pre style="margin: 0; text-align: left; margin-left: 0; padding-left: 0;">
              _______________________________
        
              <b>Nombre Apellido Apellido2</b>
              Puesto en la Empresa
              [email protected]
        
              Empresa
              <a href="https://www.empresa.com" style="color: #000000; text-decoration: none;">www.empresa.com</a>
              _______________________________
            </pre>
          </div>
        </td>
    </tr>
</table>

5
  • Hola b1nar10, he probado tu código, coloca la imagen pegada al marco izquierdo, y pegada a este, el texto, es lo que querías?. Commented el 28 mar. 2023 a las 7:43
  • Quiero pegar el texto de dentro de las etiquetas <pre> a la izquierda, en el cuadro del logo.
    – b1nar10
    Commented el 28 mar. 2023 a las 8:01
  • dentro del cuadro del logo?. Commented el 28 mar. 2023 a las 8:06
  • 1
    Ya encontré el problema, la etiqueta <pre> mantiene el formato y por más que intentaba cambiarla desde CSS era imposible, al final fue tan fácil como pegarla a la izquierda y sacar todos los espacios que tenia. Muchas Gracias de todas Maneras!
    – b1nar10
    Commented el 28 mar. 2023 a las 8:32
  • 3
    @b1nar10 Aunque parezca una tontería, podrías poner lo que has hecho como respuesta y así, si alguien más tiene un problema similar, podrá encontrar la solución. Es totalmente correcto responder tus propias preguntas :) Commented el 28 mar. 2023 a las 10:18

1 respuesta 1

2

La solución a tu problema es modificar la propiedad white-space del <pre> y establecerla a pre-line

La siguiente tabla resume el comportamiento de los diversos valores de white-space:

Nuevas líneas Espacios y tabulaciones Ajuste de texto
normal Contraer Contraer Ajustar
nowrap Contraer Contraer No ajustar
pre Preservar Preservar No ajustar
pre-wrap Preservar Preservar Ajustar
pre-line Preservar Contraer Ajustar

Ejemplo:

<table cellspacing="0" cellpadding="0" style="font-family: Arial, sans-serif; font-size: 12px; padding-left: 40px;" valign="top">
  <tr>
    <td style="vertical-align: middle; padding-left: 1px; ">
      <img src="http://logo.com/logo.png" alt="Logo" style="height: 80px; width: 80px;">
    </td>

    <td style="vertical-align: top; text-align: left;">
      <div style="display: flex; align-items: flex-start;">
        <pre style="margin: 0; text-align: left; margin-left: 0; padding-left: 0; white-space: pre-line;">
              _______________________________
        
              <b>Nombre Apellido Apellido2</b>
              Puesto en la Empresa
              [email protected]
        
              Empresa
              <a href="https://www.empresa.com" style="color: #000000; text-decoration: none;">www.empresa.com</a>
              _______________________________
            </pre>
      </div>
    </td>
  </tr>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.