css - 为什么带管道的字符串会扩展我的 div 宽度

Question

我设置了一个<td>固定宽度为 200px .我想在里面放一些文字，我希望文字换行到下一行。它似乎工作正常，除非字符串中有管道，当它不会换行时 - 它只是扩展了 <td> 的宽度。 .

这是我的 html:

    <table>
          <tbody>
            <tr ng-repeat="d in t.dependencies">
              <td style="width: 200px">{{d.text}}</td>
              <td style="width: 120px">{{d.operator}}</td>
              <td>{{d.value}}</td>
            </tr>
          </tbody>
    </table>

我正在使用的文本:

"ACCOUNTING_BUSINESS_UNIT|ACCOUNT|PROJECT|ACTIVITY_ID|RESOURCE|HOME_LOCATION|DEPARTMENT|something"

Answer 1

这个:

ACCOUNTING_BUSINESS_UNIT|ACCOUNT|PROJECT|ACTIVITY_ID|RESOURCE|HOME_LOCATION|DEPARTMENT|something

是一个单词。

单词由空格分隔。您可以解决添加 css 属性的问题:

word-break: break-all;

或者还有:

word-wrap: break-word;