代码之家  ›  专栏  ›  技术社区  ›  Nzall

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

  •  0
  • Nzall  · 技术社区  · 6 年前

    .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 data dojo attach point=“containerNode”class=“dijitDialogPaneContent”style=“width:474px;overflow:auto;position:relative;”gt;
    <table class=“dialogPanel”>
    <t车身>
    <label for=“environmentParameterDialogForm\u label\u environmentParameter\u value”class=“labelName”>value&nbsp;</label>
    </td>
    <td class=“tdLabelValue”>
    <label id=“environmentParameterDialogForm\u label\u environmentParameter\u value”class=“labelValue”>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</label>
    </td>
    </tr>
    <tr>
    <td class=“buttonLink”colspan=“2”align=“center”>
    
    </tr>
    </t车身>
    </form>
    </div>
    </div>

    然而,我发现这在我的例子中并没有帮助:虽然表单的宽度设置是有限的,但它实际上并不包装文本本身。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Chris Garaffa    6 年前

    这个 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>