html怎么设置不换行

介绍

在网页设计中，我们常常需要遇到这样的情况：需要限定某个区块不自动换行。在这篇文章中，我们将介绍如何使用HTML来实现这一点。

white-space属性

要实现不自动换行，我们需要使用CSS样式的white-space属性。white-space属性的功能是控制一行中的空格和换行的处理方式。

white-space属性最基本的取值有3个：

normal：默认值。处理方式与文本编辑器相同，忽略多余空格和换行。

pre：保留CSS原文本中所有空格和换行，即按照文本原样输出。

nowrap：不允许自动换行。

normal和pre

了解了基础知识后，我们来看一下normal和pre的具体应用：

<!-- normal -->
<p style="white-space:normal">
    Hello   world!
</p>
<!-- pre -->
<p style="white-space:pre">
    Hello   world!
</p>

输出：

Hello world!

Hello world!

由于normal方式的处理，文本输出时将多个空格缩减为一个；而pre方式则保留了HTML文本原本的空格和换行。

nowrap

nowrap常常用在表格等元素中。在表格中，我们需要限定某个单元格中的内容不换行，可以直接在td或者th标签上添加nowrap属性。

<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th nowrap>价格</th>
            <th>其它</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Java书籍</td>
            <td nowrap>人民币68.00元</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>JavaScript书籍</td>
            <td nowrap>人民币59.00元</td>
            <td></td>
        </tr>
    </tbody>
</table>

输出：

在表格中，nowrap属性可以限定某列不允许自动换行。

结语

white-space属性是HTML中十分常用的一种属性，能够控制空格和换行的输出方式。学会掌握这个属性，我们可以更加灵活地控制网页的输出效果。