时间戳

首页 > 解决方案 > Html 常量字符大小

html - Html 常量字符大小

问题描述

我正在尝试使用数据表创建一个网页，其中第一列中的描述永远不会换行。这是一个 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>

标签： htmlcssword-wrap

解决方案

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

white-space: nowrap;

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

推荐阅读