Question

下面的代码片段是我在某些对话框中遇到的问题的最小示例，该对话框在某些对话框中带有非常宽的单词的标签不能正确包装，从而导致一个令人讨厌的对话框，其按钮被推离了页面。 / p>

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

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

1 个答案: