html - 标签自动宽度使 td 更宽

Question

我在表 td 中有一个标签，问题是当标签宽度大于 td 宽度时，标签仅在一行中增长，使 td 更大并且不允许看到所有文本。我想要的是当标签的宽度高于其容器时，标签会变成另一条线。

css
.pdata {
font-size: 10px;
}

<table valign="top" cellspacing="0" cellpadding="0" border="0" height="150">
    <tbody>
        <tr valign="top">
            <td class="profile-company-text">

                <label class="pdata" ><label class="bold" style="width: 140px; display: inline-block">Email: </label><label data-bind="text: Email"></label>
                    <br>
                </label>

                </span>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

这听起来像是您的浏览器正在调整表格的大小以“最适合”您的内容。如果您想对包含标签的表格列强制实现最大宽度，请使用 CSS max-width 属性。

不幸的是，由于多种原因，确实没有办法明确回答您的问题。

在您上面给出的示例中，“电子邮件”标签几乎永远不会换行(缺少您未提供的其他样式)，因为它是一个单词，没有断点，例如连字点或空格。为了尽量减少混淆，您应该提供更多信息，例如所需输出的模型，以及实际重现不良行为的代码示例。

此外，标记有点乱。如果您使用某种生成器，请确保其配置正确。我看到的一些格式正确的问题:

1. 嵌套标签不正确。标签应仅包含不可标记的内容，除了带有标签的输入相关联。
2. 您有一个结束 span 标签，没有开始 span。

最后，您还应该考虑一些最佳实践，以使您的代码更具可读性、语义和维护性:

1. 不要使用内联样式(例如，元素上的 style 属性)。根据需要在标记中分配类，并使用外部样式表或文档 head 中的 style block 来应用表示样式。
2. 与上面类似，不要在表格中使用cellspacing、cellpadding 等属性。请改用适当的 CSS 属性。
3. 您有一个 label 没有关联的 input 元素。这不是世界上最糟糕的事情，但是 label 的全部目的是为表单输入提供上下文。如果您只需要一段文本，请使用更合适的元素，例如 p。