标签中由长于最大宽度的单词组成的文本不会换行，即使定义了最大宽度、分词和溢出换行

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

.tdLabelValue 上的 white-space: nowrap 正在其子 .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>

标签中由长于最大宽度的单词组成的文本不会换行，即使定义了最大宽度、分词和溢出换行

text consisting of words longer than max-width in label doesn't wrap, even with max-width, word-break and overflow-wrap defined

html

css

word-wrap