Html常量字符大小

Question

我正在尝试使用数据表创建一个网页，其中第一列中的描述永远不会包装。这是一个JSF-java应用程序。我试图确定最大字符数，我尝试过等宽字体，但没有成功。如何实现这一目标？

下面注意点（周期）和X的数量是相同的，但是X的包裹。

编辑：这是来自浏览器的代码。我也尝试了“white-space：nowrap”建议，它阻止了包裹，但扩展了column1的宽度，我希望有一个允许列宽保持不变的解决方案。我为这个问题中的任何不恰当而道歉，这是我的第一个。

html {
  font-size: 3vmax;
  color: #ffffff;
  background-color: #005dff;
  /* font-family: "Times New Roman", Times, serif; */
  font-family: "Courier New", monospace;
  box-sizing: border-box;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        . . . . . . . . . . . . . . .
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        X X X X X X X X X X X X X X X
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        a
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        b
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
    <tr class="dtrows">
      <td class="dtcolumn1">
        <!-- column header -->
        <!--&lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;-->
        <!-- row record -->
        c
      </td>
      <td class="dtcolumn2">
        <!--&lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;-->
        <div class="noyes">
          <!--&lt;div class="no"&gt;&lt;/div&gt;-->
          <div class="no" style="width:; height:;"></div>
          <div class="mid"></div>
          <!--&lt;div class="yes"&gt;&lt;/div&gt;-->
          <div class="yes" style="width:; height:;"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您需要在元素上应用以下CSS属性：

white-space: nowrap;

这将确保文本永远不会换行到下一行。