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

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 看起来可以接受（废话，但我能得到的最好的）但是 Signed for 1st Class 在第一个字符后中断。

有没有办法，在 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>

Answer 2

两种不同的单词拆分方式：

.one {
  word-break: break-all
}
.two {
  word-wrap: break-word;
}

<div style="width:56mm; font-family:Arial; border: 2px solid tomato; background: gold;">
  <b>word-break: break-all:</b>
  <p>Your selected shipping was <span class=one>UK_RoyalMailSecondClassStandard</span>.</p>
  <p>Your selected shipping was <span class=one>Signed For 1st Class</span>.</p>
  <b>word-wrap: break-word:</b>
  <p>Your selected shipping was <span class=two> UK_RoyalMailSecondClassStandard</span>.</p>
  <p>Your selected shipping was <span class=two>Signed For 1st Class</span>.</p>
</div>

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

word-break, prefer normal but if not possible break-all

css

word-break