0

Estoy teniendo un problema al momento de limitar el ancho de un párrafo, ya que quiero hacerlo menos ancho. Para enviar los correos estoy utilizando PHPmailer y dentro del cuerpo del HTML incluyo la etiqueta style y le agrego los estilos al párrafo.

$mail->AddAddress($email);
$mail->Subject = "Rio E-mail from Website / Contact Us Form";
$mail->Body = "
<html> 
<body> 
<style> 
    p {
        width: 10px;
    }
</style>
<p>
<strong>New Message from Rio Contact Form</strong>
</p>
<p>Name: {$name}</p>

<p>Email: {$email}</p>

<p>Mobile: {$mobile}</p>

<p>Landline: {$landline}</p>

<p>Date: {$date}</p>

<p>People: {$people}</p>

<p>Lunch: {$lunch}</p>

<p>Enquiry: {$enquiry}</p>

<p>Questions: {$questions}</p>
<br>
<br>
<br>
<br>
<br>
<p>{$ips } {$query['city']} {$query['regionName']} {$query['zip']} {$query['timezone']}</p>
</body> 
</html>
<br />";
$mail->AltBody = 'Body example'; 

Sin embargo al revisar el resultado me muestra algo así :

introducir la descripción de la imagen aquí

1
  • Aplicar estilos a plantillas de correos es un poco tedioso, porque tienes que agregar los estilos en linea, prueba agregar la regla dentro del p, como style="width: 10px", para crear una plantilla de correos, y que tengas el HTML listo puedes usar el generador de plantillas de MailChimp es super util
    – AugustoM
    Commented el 15 may. 2023 a las 0:12

2 respuestas 2

0

creo que esto es lo que estas buscando, el atributo overflow-wrap: break-word; y su valor te ayudan a "cortar" una palabra muy larga y adaptarla al tamaño, modifica el width con el tamaño que mejor te parezca.

Espero haberte ayudado.

<html> 
<body> 
<style> 
    .ancho{
        width: 100%;
        overflow-wrap: break-word;
    }
</style>
<p>
<strong>New Message from Rio Contact Form</strong>
</p>
<p>Name: {$name}</p>

<p>Email: {$email}</p>

<p>Mobile: {$mobile}</p>

<p>Landline: {$landline}</p>

<p>Date: {$date}</p>

<p>People: {$people}</p>

<p>Lunch: {$lunch}</p>

<p>Enquiry: {$enquiry}</p>

<p class="ancho">Questions:</p>
<br>
<br>
<br>
<br>
<br>
<p>{$ips } {$query['city']} {$query['regionName']} {$query['zip']} {$query['timezone']}</p>
</body> 
</html>
<br />";

0

El problema en el "p" que presentas en la imagen y ocupa toda la pantalla es que en realidad tienes una sola palabra. Al no tener ningún espacio el texto entre caracteres el navegador lo interpreta como una sola palabra y por tanto obliga a desbordar el contenido sobre el contenedor al no haber puesto limitaciones al mismo. Si rompes esa "palabra" verás que se comporta de otro modo.

Además en el estilo que planteas para tu "p" con un "width" tan estrecho no creo que se vaya a comportar como tú deseas, te sugiero que hagas algo como esto adaptándolo a tu proyecto a través de una clase que se aplique sobre le contenedor que te está dándo problemas:

     p.parrafoBien {
         width: 150px; /* o max-width si quieres delimitar de manera más estricta el ancho máximo*/
         overflow: hidden; /* impide que se vea el c
ontenido que rebasa el tamaño del contenedor */
         white-space: normal /* hace que el texto se ajuste al contenedor saltando de línea cuando ya no quepa en el espacio definido */
         }
$mail->AddAddress($email);
$mail->Subject = "Rio E-mail from Website / Contact Us Form";
$mail->Body = "
<html> 
<body> 
<p>
<strong>New Message from Rio Contact Form</strong>
</p>
<p>Name: {$name}</p>

<p>Email: {$email}</p>

<p>Mobile: {$mobile}</p>

<p>Landline: {$landline}</p>

<p>Date: {$date}</p>

<p>People: {$people}</p>

<p>Lunch: {$lunch}</p>

<p>Enquiry: {$enquiry}</p>

<p>Questions: {$questions}</p>
<br>
<br>
<br>
<br>
<br>
 <p class="parrafoBien">Questions PRUEBA: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere massa a orci lacinia mollis. Praesent sit amet est fringilla mi mattis tempus in rhoncus nunc. Aenean a nisl malesuada, auctor magna non, bibendum neque. Suspendisse feugiat magna lectus, quis porta sapien molestie non. Quisque ut enim a felis pharetra venenatis id a lorem. Aliquam mattis nunc ante, non porta enim posuere ut. Nullam non convallis lacus. Mauris mollis egestas orci ut congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>{$ips } {$query['city']} {$query['regionName']} {$query['zip']} {$query['timezone']}</p>
</body> 
</html>
<br />";
$mail->AltBody = 'Body example'; 

He adaptado la respuesta para que puedas ver el resultado. Para ello he duplicado el "p" que te da problema y aplicado la clase, como verás no he cambiado nada del "css" que se le aplica para que veas que funciona como esperábamos.

2
  • Hola @JorgeGuz,Ya utilice el código que me diste, ademas agregue un lorem ipsum para ver si el problema era de una palabra pero no, el texto se sigue viendo igual. Commented el 31 mar. 2020 a las 21:23
  • He adaptado la respuestá para que puedas ver el resultado. Espero que pueda serte de ayuda. Como verás el css no lo he cambiado para nada, tan solo se lo pasamos al "p" como clase, en lugar de como estilo genérico.
    – JorgeGuz
    Commented el 1 abr. 2020 a las 6:14

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.