текст, состоящий из слов длиннее, чем max-width в метке, не переносится, даже если определены max-width, word-break и overflow-wrap - PullRequest
Новая
       17

текст, состоящий из слов длиннее, чем max-width в метке, не переносится, даже если определены max-width, word-break и overflow-wrap

0 голосов
/ 31 августа 2018

Приведенный ниже фрагмент является минимальным примером проблемы, с которой я сталкиваюсь, когда в некоторых диалогах метка с очень широким словом в нем не переносится должным образом, что приводит к непристойно широкому диалогу с нажатием кнопок на странице. 

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

Однако я обнаружил, что на самом деле это не помогает в моем случае: хотя форма получает ограниченный набор ширины, она фактически не переносит сам текст.

Есть ли способ это исправить? Во всех руководствах и статьях, которые я нашел по этому вопросу, сказано, что установка ширины в сочетании с двумя другими добавленными мною свойствами должна исправить это, но это только частично решает проблему.

1 Ответ

0 голосов
/ 31 августа 2018

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