Question

我想要以下代码：

<pre style="voodoo">123456789</pre>

显示为：

123
456
789

（一般来说，我有一大块文字，我想在一行中准确显示n个字符，其中n是任意数字）。

所以我尝试了这个：

<pre style="width:3em; word-wrap:break-word;">123456789</pre>

但是em并没有真正以这种方式工作;和px一样。我有一个单位描述字体宽度（特别是在环境中）？或者是否应该更改另一个属性而不是宽度？

Answer 1

[＆lt; pre＆gt;] [1]的重点是保留格式化（空白区域），这与您尝试的方法相反！虽然这似乎对我有用

<div style="word-wrap: break-word;width:60px">
12345678910123456789
</div>

<pre style="word-wrap: break-word;width:60px">
12345678910123456789
</pre>

Answer 2

以下似乎有效：

pre {
    width: 2em;
    word-wrap: break-word;
}

JS Fiddle demo

虽然我怀疑完美的宽度，以及每行的字符数和宽度之间的关系，似乎有点随意，并且通过反复试验找到。因此，虽然它有效（至少在Chromium 17 / Ubuntu 11.04中），但我并不是特别满意。

Answer 3

您可以尝试手动选择width的适当值，但我不确定它在所有浏览器/系统中都能正常工作。

顺便说一下em表示“符号m的宽度”，所以它应该做的工作。但它没有，不知道为什么。

Answer 4

这两项都适用于Firefox，但我不了解其他浏览器：

<pre wrap width="3" style="word-wrap:break-word;">123456789</pre>
<pre style="width: 3ch; white-space: pre-wrap; word-wrap: break-word;">123456789</pre>

Answer 5

您可以使用以下公式计算宽度使用值

width =（每行符号的数量）/1.5

例如

每行9个符号/ 1.5 = 6em

如果您不使用font-size-adjust

，它将起作用

HTML：控制<pre> environment</pre>中每行的字符数

5 个答案: