css - 分词，更喜欢正常，但如果不可能，则全部中断

Question

我正在创建一个非常薄的页面(它被打印在收据纸上:56 毫米宽)

我正在尝试显示一些文本(在本例中为运送选择)。有时这个文本是正常的一些间隔单词，例如'Signed for 1st Class'，有时是一个长词，例如'UK_RoyalMailSecondClassStandard'。我的 HTML/CSS 不知道文本是什么(它呈现为 php)

我的 html 是:

<div style="margin: 0px;max-width: 56mm;font-family: Arial;border: 1px solid black;">
  Break-all:
  <p>
    Your selected shipping was <span style="word-break: break-all"> UK_RoyalMailSecondClassStandard</span>.
  </p>

  <p>
    Your selected shipping was <span style="word-break: break-all">Signed For 1st Class</span>.
  </p>

Normal:
  <p>
    Your selected shipping was <span> UK_RoyalMailSecondClassStandard</span>.
  </p>

  <p>
    Your selected shipping was <span>Signed For 1st Class</span>.
  </p>

</div>

正如您从上面的代码片段中看到的，Signed for 1st Class 看起来不错，分词正常，但 UK_RoyalMailSecondClassStandard 比最大宽度更宽。对于 word-brak:break-all UK_RoyalMailSecondClassStandard 看起来可以接受(好废话，但我能得到的最好的)但是在第一个字符之后签署了 1st Class breaks。

有没有办法，在不知道运输文本是什么的情况下，在 CSS 中:1) 打破常规，如果可能，否则打破一切或者2) 打破常规，但实际上强制执行最大宽度。

我觉得我正在使它变得比它需要的更复杂，但我不确定如何继续。

Answer 1

使用word-wrap: break-word :

<div style="margin: 0px;max-width: 56mm;font-family: Arial;border: 1px solid black;">
  break-word:
  <p>
    Your selected shipping was <span style="word-wrap: break-word"> UK_RoyalMailSecondClassStandard</span>.
  </p>

  <p>
    Your selected shipping was <span style="word-wrap: break-word">Signed For 1st Class</span>.
  </p>
</div>