html - 限制 中的宽度大小

Question

我正在尝试做一个pre来限制不超过表格的宽度大小，尝试使用这个标签:

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

<pre>和表格，但在任何情况下都不起作用。

谁能帮帮我？

Answer 1

在 pre 元素上设置 max-width 实际上限制了它的宽度。您可以通过使用浏览器的开发人员工具检查元素来查看这一点，也可以简单地通过在其上设置背景颜色来查看，比如 pre { background: yellow }。注意:使用 outline 属性进行测试会在 Firefox 中给出错误的结果；但即使它正确地实现了 border 属性。

通常在渲染元素时，内容可能会溢出元素的宽度，默认是visible overflow。如果你想切断它，只渲染适合的部分，设置 pre { overflow: hidden } 。如果你想用省略号“…”表示截断，也设置 pre { text-overflow: ellipsis; 。

如果您希望在需要使内容适合时让长行换行，您可以改为设置 pre { white-space: pre-wrap }。但是，没有空格的长字符串仍然会导致溢出。这可以通过添加 pre { word-wrap: break-word; 来防止。 } (旧语法)或 pre { overflow-wrap: break-word; }(新语法，浏览器支持稍微有限)。