Limit the width size in <pre>

Question

I'm trying to make a pre to limit the width size that does not exceed the table, try using this tag:

<?php
echo "<pre style='max-width:1px;'>".$long_string."</pre>";
?>

both the <pre> and the table but does not work in any case.

anyone can help me?

Answer 1

Setting max-width on a pre element actually restricts it width. You can see this by inspecting the element using a browser’s Developer Tools and also simply by setting a background color on it, say pre { background: yellow }. Note: testing this with the outline property gives a wrong result in Firefox; but even it implements the border property correctly.

As usual in rendering elements, content may overflow the width of the element, and the default is visible overflow. If you wish to cut it off, rendering just the part that fits in, set pre { overflow: hidden }. If you wish to indicate truncation with an ellipsis “…”, set also pre { text-overflow: ellipsis; }.

If you would want to make long lines wrap when needed to make the content fit, you can instead set pre { white-space: pre-wrap }. However, long strings without spaces could still cause overflow. This can be prevented by adding pre { word-wrap: break-word; } (old syntax) or pre { overflow-wrap: break-word; } (new syntax, with slightly more limited browser support).