即使使用max-width，word-break和overflow-wrap定义，包含超过标签中max-width的单词的文本也不会换行

Question

下面的代码片段是我遇到的问题的最小示例，在某些对话框中，带有非常宽的单词的标签不能正确包装，导致按钮被推离页面时出现一个非常宽的对话框。

.dialogPanel {
  background-color: #F9F9F9;
  border: 1px solid #DEDEDE;
  padding: 0;
  min-width: 360px;
}

.tableForm tr td {
  font-size: 12px !important;
  padding: 1px 0;
}

td.tdLabelName {
  line-height: 1.4;
  vertical-align: top;
}

.tableForm tr td label,
.tableForm tr td span.labelName {
  padding-right: 4px;
}

.labelName {
  background-color: #f2f2f2;
  border-bottom: 1px solid #fff;
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  min-height: 19px;
  text-align: right;
}

.tableForm tr td {
  font-size: 12px !important;
  padding: 1px 0;
}

td.tdLabelValue {
  width: 200px;
  white-space: nowrap;
}

.tableForm tr td label,
.tableForm tr td span.labelName {
  padding-right: 4px;
}

.labelValue {
  background-color: #f2f2f2;
  border-bottom: 1px solid #fff;
  display: block;
  font-size: 13px;
  font-style: normal;
  min-height: 19px;
  text-align: left;
}

<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="environmentParameterDialog_title" id="environmentParameterDialog" widgetid="environmentParameterDialog" style="position: absolute; opacity: 1; z-index: 950;">
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: 474px; overflow: auto; position: relative;">
    <div id="environmentParameterDialogContents" class="environmentParameterDialogContents">
      <form id="environmentParameterDialogForm" name="environmentParameterDialogForm" action="/alm/displayCopyParameterInfo.action" method="POST" class="tableForm">
        <table class="dialogPanel">
          <tbody>
            <tr>
              <td class="tdLabelName">
                <label for="environmentParameterDialogForm_label_environmentParameter_value" class="labelName">Value&nbsp;</label>
              </td>
              <td class="tdLabelValue">
                <label id="environmentParameterDialogForm_label_environmentParameter_value" class="labelValue">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</label>
              </td>
            </tr>
            <tr>
              <td class="buttonLink" colspan="2" align="center">

                <input value="Copy" type="button" class="button" id="copySubmitButton">
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>

这个问题的常见解决方案是设置最大宽度和一些包装属性：

.dialogPanel {
  background-color: #F9F9F9;
  border: 1px solid #DEDEDE;
  padding: 0;
  min-width: 360px;
}

.tableForm tr td {
  font-size: 12px !important;
  padding: 1px 0;
}

td.tdLabelName {
  line-height: 1.4;
  vertical-align: top;
}

.tableForm tr td label,
.tableForm tr td span.labelName {
  padding-right: 4px;
}

.labelName {
  background-color: #f2f2f2;
  border-bottom: 1px solid #fff;
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  min-height: 19px;
  text-align: right;
}

.tableForm tr td {
  font-size: 12px !important;
  padding: 1px 0;
}

td.tdLabelValue {
  width: 200px;
  white-space: nowrap;
}

.tableForm tr td label,
.tableForm tr td span.labelName {
  padding-right: 4px;
}

.labelValue {
  background-color: #f2f2f2;
  border-bottom: 1px solid #fff;
  display: block;
  font-size: 13px;
  font-style: normal;
  min-height: 19px;
  text-align: left;
}


label.labelValue {
    max-width: 350px;
    word-break: break-all;
    overflow-wrap: break-word;
}

<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="environmentParameterDialog_title" id="environmentParameterDialog" widgetid="environmentParameterDialog" style="position: absolute; opacity: 1; z-index: 950;">
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: 474px; overflow: auto; position: relative;">
    <div id="environmentParameterDialogContents" class="environmentParameterDialogContents">
      <form id="environmentParameterDialogForm" name="environmentParameterDialogForm" action="/alm/displayCopyParameterInfo.action" method="POST" class="tableForm">
        <table class="dialogPanel">
          <tbody>
            <tr>
              <td class="tdLabelName">
                <label for="environmentParameterDialogForm_label_environmentParameter_value" class="labelName">Value&nbsp;</label>
              </td>
              <td class="tdLabelValue">
                <label id="environmentParameterDialogForm_label_environmentParameter_value" class="labelValue">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</label>
              </td>
            </tr>
            <tr>
              <td class="buttonLink" colspan="2" align="center">

                <input value="Copy" type="button" class="button" id="copySubmitButton">
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>

但是，我发现在我的情况下实际上没有帮助：虽然表单确实获得了有限的宽度设置，但它实际上并没有包装文本本身。

有没有办法来解决这个问题？我在这个主题上发现的所有指南和文章都说设置宽度与我添加的其他2个属性相结合应该修复它，但它只能部分解决问题。

Answer 1

white-space: nowrap上的.tdLabelValue正在其子女.labelValue上继承。如果您不需要它，请删除该属性，或者将white-space: normal添加到label.labelValue以覆盖它。

.dialogPanel {
  background-color: #F9F9F9;
  border: 1px solid #DEDEDE;
  padding: 0;
  min-width: 360px;
}

.tableForm tr td {
  font-size: 12px !important;
  padding: 1px 0;
}

td.tdLabelName {
  line-height: 1.4;
  vertical-align: top;
}

.tableForm tr td label,
.tableForm tr td span.labelName {
  padding-right: 4px;
}

.labelName {
  background-color: #f2f2f2;
  border-bottom: 1px solid #fff;
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  min-height: 19px;
  text-align: right;
}

.tableForm tr td {
  font-size: 12px !important;
  padding: 1px 0;
}

td.tdLabelValue {
  width: 200px;
  white-space: nowrap;
}

.tableForm tr td label,
.tableForm tr td span.labelName {
  padding-right: 4px;
}

.labelValue {
  background-color: #f2f2f2;
  border-bottom: 1px solid #fff;
  display: block;
  font-size: 13px;
  font-style: normal;
  min-height: 19px;
  text-align: left;
  white-space: normal;
}


label.labelValue {
    max-width: 350px;
    word-break: break-all;
    overflow-wrap: break-word;
}

<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="environmentParameterDialog_title" id="environmentParameterDialog" widgetid="environmentParameterDialog" style="position: absolute; opacity: 1; z-index: 950;">
  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: 474px; overflow: auto; position: relative;">
    <div id="environmentParameterDialogContents" class="environmentParameterDialogContents">
      <form id="environmentParameterDialogForm" name="environmentParameterDialogForm" action="/alm/displayCopyParameterInfo.action" method="POST" class="tableForm">
        <table class="dialogPanel">
          <tbody>
            <tr>
              <td class="tdLabelName">
                <label for="environmentParameterDialogForm_label_environmentParameter_value" class="labelName">Value&nbsp;</label>
              </td>
              <td class="tdLabelValue">
                <label id="environmentParameterDialogForm_label_environmentParameter_value" class="labelValue">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</label>
              </td>
            </tr>
            <tr>
              <td class="buttonLink" colspan="2" align="center">

                <input value="Copy" type="button" class="button" id="copySubmitButton">
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>