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

Question

The below snippet is a minimum example of the problem I have where in certain dialogs, a label with a very wide word in it doesn't wrap properly, leading to an obscenely wide dialog with buttons being pushed off the page.

.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>

The usual solution to this problem is setting a max-width and some wrapping properties:

.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>

However, I've found that actually does not help in my case: while the form does get a limited width set, it doesn't actually wrap the text itself.

Is there a way to fix this? All guides and articles I've found on the subject say that setting a width combined with the other 2 properties I've added should fix it, but it only fixes the issue partially.

Answer 1

The white-space: nowrap on .tdLabelValue is being inherited on its child .labelValue. Either remove that property if you don't need it, or add white-space: normal to label.labelValue to override it.

.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>