Question

我想在一个范围内显示以下文字：

<span>
State                      State Code<BR><BR>
ALABAMA                         AL<BR>
ALASKA                          AK<BR>
</span>

所以我用

替换了空格

&nbsp;

但文字仍然如下： http://jsfiddle.net/yh7n2/

我做错了什么？

Answer 1

你所拥有的是一个表，所以你应该使用<table>作为标记。

<table>
    <tbody>
        <tr>
            <th>State</th>
            <th>State Code</th>
        </tr>
        <tr>
            <td>ALABAMA</td>
            <td>AL</td>
        </tr>
        <tr>
            <td>ALASKA</td>
            <td>AK</td>
        </tr>
    </tbody>
</table>

<table> example on jsfiddle

如果您绝对必须保留空格，请不要将空格字符更改为不间断的空格字符。相反，请使用预先格式化的文本：

<pre>
lorem   ipsum
dolor   sit
amet
</pre>

<pre> example on jsfiddle

如果您不想使用<pre>元素，可以在CSS中使用white-space: pre。

一般来说，预先格式化的文本最适合使用等宽字体，就像所有字符一样。空格填充相同的空间，以便您可以均匀地对齐多条线。

Answer 2

另一种选择是将范围包装在<pre>元素中：

<pre><span>
State                      State Code<BR><BR>
ALABAMA                         AL<BR>
ALASKA                          AK<BR>
</span></pre>

<强> jsFiddle example

哪会产生：

State                      State Code


ALABAMA                         AL

ALASKA                          AK

Answer 3

您是否希望将长状态名称左对齐并且缩写对齐？如果是这样，或许你会更好<table>

如何正确显示跨度中的间距

3 个答案: