html - 的“宽度”属性在 Chrome 中不起作用

Question

我使用 pre 的“宽度”属性来控制每行的最大单词数。在 Firefox 中它可以正常执行，但在 Chrome 中“宽度”属性不起作用。我不知道为什么。

例如：宽度=70

Answer 1

的width属性pre最初在HTML 2.0中定义如下：“WIDTH 属性指定了一行的最大字符数，并允许 HTML 用户代理选择合适的字体和缩进。” 所以它并不是要改变pre（保留空格和换行符，不添加换行）的基本含义。这保留在较新的规范中，但未在浏览器中实现。

相反，Firefox 将width其视为指示文本换行之后的字符限制。其他浏览器忽略它。

要指定包装，请width在 CSS 中设置并设置white-space: pre-wrap（在相当新的浏览器中广泛支持）。但是问问你自己：如果你不想要pre（保持格式不变）的基本效果，你应该使用其他元素吗？

您不能width在 CSS 中设置字符，但如果字体是等宽字体（这是 的默认值），则在支持浏览器的情况下使用该ch单位效果很好pre。对于较旧的浏览器，您可以使用该em单位，粗略猜测要使用的字体中字符的宽度。例子：

pre { 
white-space: pre-wrap;
width: 40em;
width: 70ch;
}

如果您希望减小字体大小，按照最初的想法<pre width=...>，font-size在pre元素上设置。

Answer 2

从HTML 4.01 规范：

宽度 = 数字 [CN]
已弃用。此属性向可视化用户代理提供有关格式化块所需宽度的提示。用户代理可以使用此信息来选择适当的字体大小或适当地缩进内容。所需宽度以字符数表示。该属性目前没有得到广泛支持。

HTML 5 将该属性标记为已过时并表示：

以下属性已过时（尽管元素仍然是语言的一部分），作者不得使用
……<br> pre 元素的宽度

如果要控制宽度，请在 CSS 中进行。不幸的是，您不能在characters中指定它。