Papercut-SMTP icon indicating copy to clipboard operation
Papercut-SMTP copied to clipboard

Does not support CSS force word wrap

Open ve3 opened this issue 5 years ago • 7 comments

Describe the bug A basic inline stylesheet like overflow-wrap: break-word; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; is not supported.

Full example email message

<p>Token: <code style="overflow-wrap: break-word; white-space: pre-wrap; word-wrap: break-word; word-break: break-all;">eyJjaXBoZXJ0ZXh0IjoiWVpORDh3SkNcL1NjemthT20yaUUyUkE9PSIsIml2IjoiYjhmNGY0Y2ZhNjdhZjAzMDYyYzNhYTEwOTQwODY0YmUiLCJzYWx0IjoiMGRjOTMzNTgzNzhhYTBkMmVjOTExODNhZTYzZDE3OWY4ZmM0MWU3MzA3OGYyOTY1Zjg4ZTIyOGYwYjkyMzdjNzVkNTZjYjI5YzI4YTI5MDkzNTJkZTRlZWE3MWU2YmE1MmVjZTk1N2U4MDgwZGI5NWUxZDNmOTRlN2IxZjNjZGQ1Y2JhNzY3ZmI2YTc3MzlkMWM1MTFlOTAyYzg3ODg0MmM5NWI3ZDQzNjM4N2I5Y2M1NWExY2JkNTE2YjU0MDk1ZTVjNzZkNzVlMzYwZGIyZDUzYzkwMWUzOGYyNzhmMDJkOTg2MGVjMjVkMTE2MjA0YzU1YzA4ZGFkZTZmOWMwYmFiOGU2ODZiN2M4MGJmYzA2N2MxZDJiY2Q2MmIxNWY5OGZlNDdlMGYwZGRmMDllMWY3ZjRiM2MzOTAwYWVjMjlkMzhhNGYxYzg4ZmYyN2ZjNzIzMTM3MjE1NDVlY2RiNGZjZjhlYzUyYjVkYWFmNzFlMjM5YWQ1ZmJjOWQzOGQ1ZDk2MjYwMjkzOTlmNDZiNWUyODdjZWFhMWIwZWViYmYzMGMxYmFlMDFiMThmYTQ2OWRlMWRjMTI2MDMxNzM0NDI1MWE5NzEyMDhkNWZkYWFmYTc1ZTIzNWQzYWRjZDUwM2RlNTFhZDQxYjFjMDU0OWRiOTRhN2JjYzIwY2I2NzgiLCJpdGVyYXRpb25zIjo5OTl9</code>

To Reproduce Steps to reproduce the behavior:

  1. Send HTML email with long text such as xxxxxx for more than 100 characters.
  2. New message appears in Papercut but the message is very long and not wrap.

Expected behavior These stylesheet should force wrap the word/text because it is very basic.

Desktop (please complete the following information):

  • OS: Windows 10 64 bit 1903
  • Papercut 5.5.1

ve3 avatar Aug 09 '19 06:08 ve3

Hello @ve3 Does this problem still exist?

1Jesper1 avatar Nov 08 '21 20:11 1Jesper1

Yes, still exist. This is full test code.

<?php

$to = '[email protected]';

$subject = 'test';

$message = '<html>
<body>
<p>Token: 
<code style="overflow-wrap: break-word; white-space: pre-wrap; word-wrap: break-word; word-break: break-all;">
eyJjaXBoZXJ0ZXh0IjoiWVpORDh3SkNcL1NjemthT20yaUUyUkE9PSIsIml2IjoiYjhmNGY0Y2ZhNjdhZjAzMDYyYzNhYTEwOTQwODY0YmUiLCJzYWx0IjoiMGRjOTMzNTgzNzhhYTBkMmVjOTExODNhZTYzZDE3OWY4ZmM0MWU3MzA3OGYyOTY1Zjg4ZTIyOGYwYjkyMzdjNzVkNTZjYjI5YzI4YTI5MDkzNTJkZTRlZWE3MWU2YmE1MmVjZTk1N2U4MDgwZGI5NWUxZDNmOTRlN2IxZjNjZGQ1Y2JhNzY3ZmI2YTc3MzlkMWM1MTFlOTAyYzg3ODg0MmM5NWI3ZDQzNjM4N2I5Y2M1NWExY2JkNTE2YjU0MDk1ZTVjNzZkNzVlMzYwZGIyZDUzYzkwMWUzOGYyNzhmMDJkOTg2MGVjMjVkMTE2MjA0YzU1YzA4ZGFkZTZmOWMwYmFiOGU2ODZiN2M4MGJmYzA2N2MxZDJiY2Q2MmIxNWY5OGZlNDdlMGYwZGRmMDllMWY3ZjRiM2MzOTAwYWVjMjlkMzhhNGYxYzg4ZmYyN2ZjNzIzMTM3MjE1NDVlY2RiNGZjZjhlYzUyYjVkYWFmNzFlMjM5YWQ1ZmJjOWQzOGQ1ZDk2MjYwMjkzOTlmNDZiNWUyODdjZWFhMWIwZWViYmYzMGMxYmFlMDFiMThmYTQ2OWRlMWRjMTI2MDMxNzM0NDI1MWE5NzEyMDhkNWZkYWFmYTc1ZTIzNWQzYWRjZDUwM2RlNTFhZDQxYjFjMDU0OWRiOTRhN2JjYzIwY2I2NzgiLCJpdGVyYXRpb25zIjo5OTl9
</code>
</p>
</body>
</html>';

// To send HTML mail, the Content-type header must be set
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=iso-8859-1';

// Additional headers
$headers[] = 'From: Sender <[email protected]>';


$result = mail($to, $subject, $message, implode("\r\n", $headers));

Papercut 5.8.0

ve3 avatar Nov 09 '21 03:11 ve3

@ve3 What happens if you add <p style="width: 150px">

1Jesper1 avatar Nov 09 '21 07:11 1Jesper1

@ve3 What happens if you add <p style="width: 150px">

Nothing change.

ve3 avatar Nov 09 '21 07:11 ve3

@ve3 I tried https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap in an eml file in Papercut and it word-wrap seemed to work. I just added width style to the div.

1Jesper1 avatar Nov 09 '21 07:11 1Jesper1

Yes, that word wrap within div seems to work but not in p.

Full code

<?php

$to = '[email protected]';

$subject = 'test';

$message = '<html>
<body>
<div style="word-wrap: break-word;">
<p>Token: 
<code style="overflow-wrap: break-word; white-space: pre-wrap; word-wrap: break-word; word-break: break-all;">
eyJjaXBoZXJ0ZXh0IjoiWVpORDh3SkNcL1NjemthT20yaUUyUkE9PSIsIml2IjoiYjhmNGY0Y2ZhNjdhZjAzMDYyYzNhYTEwOTQwODY0YmUiLCJzYWx0IjoiMGRjOTMzNTgzNzhhYTBkMmVjOTExODNhZTYzZDE3OWY4ZmM0MWU3MzA3OGYyOTY1Zjg4ZTIyOGYwYjkyMzdjNzVkNTZjYjI5YzI4YTI5MDkzNTJkZTRlZWE3MWU2YmE1MmVjZTk1N2U4MDgwZGI5NWUxZDNmOTRlN2IxZjNjZGQ1Y2JhNzY3ZmI2YTc3MzlkMWM1MTFlOTAyYzg3ODg0MmM5NWI3ZDQzNjM4N2I5Y2M1NWExY2JkNTE2YjU0MDk1ZTVjNzZkNzVlMzYwZGIyZDUzYzkwMWUzOGYyNzhmMDJkOTg2MGVjMjVkMTE2MjA0YzU1YzA4ZGFkZTZmOWMwYmFiOGU2ODZiN2M4MGJmYzA2N2MxZDJiY2Q2MmIxNWY5OGZlNDdlMGYwZGRmMDllMWY3ZjRiM2MzOTAwYWVjMjlkMzhhNGYxYzg4ZmYyN2ZjNzIzMTM3MjE1NDVlY2RiNGZjZjhlYzUyYjVkYWFmNzFlMjM5YWQ1ZmJjOWQzOGQ1ZDk2MjYwMjkzOTlmNDZiNWUyODdjZWFhMWIwZWViYmYzMGMxYmFlMDFiMThmYTQ2OWRlMWRjMTI2MDMxNzM0NDI1MWE5NzEyMDhkNWZkYWFmYTc1ZTIzNWQzYWRjZDUwM2RlNTFhZDQxYjFjMDU0OWRiOTRhN2JjYzIwY2I2NzgiLCJpdGVyYXRpb25zIjo5OTl9
</code>
</p>
</div>
</body>
</html>';

// To send HTML mail, the Content-type header must be set
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=iso-8859-1';

// Additional headers
$headers[] = 'From: Sender <[email protected]>';


$result = mail($to, $subject, $message, implode("\r\n", $headers));

Raw result in papercut.

Date: Tue, 09 Nov 2021 14:46:03 +0700
Subject: test
To: [email protected]
X-PHP-Originating-Script: 0:papercut.php
MIME-Version: 1.0
Content-type: text/html; charset=iso-8859-1
From: Sender <[email protected]>

<html>
<body>
<div style="word-wrap: break-word;">
<p>Token: 
<code style="overflow-wrap: break-word; white-space: pre-wrap; word-wrap: break-word; word-break: break-all;">
eyJjaXBoZXJ0ZXh0IjoiWVpORDh3SkNcL1NjemthT20yaUUyUkE9PSIsIml2IjoiYjhmNGY0Y2ZhNjdhZjAzMDYyYzNhYTEwOTQwODY0YmUiLCJzYWx0IjoiMGRjOTMzNTgzNzhhYTBkMmVjOTExODNhZTYzZDE3OWY4ZmM0MWU3MzA3OGYyOTY1Zjg4ZTIyOGYwYjkyMzdjNzVkNTZjYjI5YzI4YTI5MDkzNTJkZTRlZWE3MWU2YmE1MmVjZTk1N2U4MDgwZGI5NWUxZDNmOTRlN2IxZjNjZGQ1Y2JhNzY3ZmI2YTc3MzlkMWM1MTFlOTAyYzg3ODg0MmM5NWI3ZDQzNjM4N2I5Y2M1NWExY2JkNTE2YjU0MDk1ZTVjNzZkNzVlMzYwZGIyZDUzYzkwMWUzOGYyNzhmMDJkOTg2MGVjMjVkMTE2MjA0YzU1YzA4ZGFkZTZmOWMwYmFiOGU2ODZiN2M4MGJmYzA2N2MxZDJiY2Q2MmIxNWY5OGZlNDdlMGYwZGRmMDllMWY3ZjRiM2MzOTAwYWVjMjlkMzhhNGYxYzg4ZmYyN2ZjNzIzMTM3MjE1NDVlY2RiNGZjZjhlYzUyYjVkYWFmNzFlMjM5YWQ1ZmJjOWQzOGQ1ZDk2MjYwMjkzOTlmNDZiNWUyODdjZWFhMWIwZWViYmYzMGMxYmFlMDFiMThmYTQ2OWRlMWRjMTI2MDMxNzM0NDI1MWE5NzEyMDhkNWZkYWFmYTc1ZTIzNWQzYWRjZDUwM2RlNTFhZDQxYjFjMDU0OWRiOTRhN2JjYzIwY2I2NzgiLCJpdGVyYXRpb25zIjo5OTl9
</code>
</p>
</div>
</body>
</html>

ve3 avatar Nov 09 '21 07:11 ve3

@ve3

<p>Token: 
<code style="overflow-wrap: break-word; white-space: pre-wrap; word-wrap: break-word; word-break: break-all;">
eyJjaXBoZXJ0ZXh0IjoiWVpORDh3SkNcL1NjemthT20yaUUyUkE9PSIsIml2IjoiYjhmNGY0Y2ZhNjdhZjAzMDYyYzNhYTEwOTQwODY0YmUiLCJzYWx0IjoiMGRjOTMzNTgzNzhhYTBkMmVjOTExODNhZTYzZDE3OWY4ZmM0MWU3MzA3OGYyOTY1Zjg4ZTIyOGYwYjkyMzdjNzVkNTZjYjI5YzI4YTI5MDkzNTJkZTRlZWE3MWU2YmE1MmVjZTk1N2U4MDgwZGI5NWUxZDNmOTRlN2IxZjNjZGQ1Y2JhNzY3ZmI2YTc3MzlkMWM1MTFlOTAyYzg3ODg0MmM5NWI3ZDQzNjM4N2I5Y2M1NWExY2JkNTE2YjU0MDk1ZTVjNzZkNzVlMzYwZGIyZDUzYzkwMWUzOGYyNzhmMDJkOTg2MGVjMjVkMTE2MjA0YzU1YzA4ZGFkZTZmOWMwYmFiOGU2ODZiN2M4MGJmYzA2N2MxZDJiY2Q2MmIxNWY5OGZlNDdlMGYwZGRmMDllMWY3ZjRiM2MzOTAwYWVjMjlkMzhhNGYxYzg4ZmYyN2ZjNzIzMTM3MjE1NDVlY2RiNGZjZjhlYzUyYjVkYWFmNzFlMjM5YWQ1ZmJjOWQzOGQ1ZDk2MjYwMjkzOTlmNDZiNWUyODdjZWFhMWIwZWViYmYzMGMxYmFlMDFiMThmYTQ2OWRlMWRjMTI2MDMxNzM0NDI1MWE5NzEyMDhkNWZkYWFmYTc1ZTIzNWQzYWRjZDUwM2RlNTFhZDQxYjFjMDU0OWRiOTRhN2JjYzIwY2I2NzgiLCJpdGVyYXRpb25zIjo5OTl9
</code>
</p>

This also won't work in Chrome? Tested in w3schools.

1Jesper1 avatar Nov 09 '21 07:11 1Jesper1