断词，喜欢正常，但如果不可能全部 [英] word-break, prefer normal but if not possible break-all

问题描述

我正在创建非常薄的页面（正在打印在收据纸上：56mm宽）

I am creating a very thin page (it's being printed on receipt paper: 56mm wide)

我要显示一些文本。有时这个文本是正常的一些间隔的字，例如。 签名一级，有时它是一个长单词，例如。 'UK_RoyalMailSecondClassStandard'。我的HTML / CSS不知道文本是什么（它是呈现php）

I am trying to display some text (in this case shipping selection). Sometimes this text is normal a number of spaced words, e.g. 'Signed for 1st Class', sometimes it is one long word, e.g. 'UK_RoyalMailSecondClassStandard'. My HTML/CSS doesn't know what the text will be (it's rendered 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看起来不错，而word-break正常，但是UK_RoyalMailSecondClassStandard比max-width宽。
对于word-brak：break-all UK_RoyalMailSecondClassStandard看起来可以接受（很好，但最好的我可以得到），但签署第一个字符后的第一课休息。

As you can see from the above snippet, Signed for 1st Class looks good with word-break normal, but UK_RoyalMailSecondClassStandard is wider than the max-width. For word-brak:break-all UK_RoyalMailSecondClassStandard looks acceptable (well crap but the best I can get) but Signed for 1st Class breaks after the first character.

有没有办法，在CSS中，不知道什么是送货文本将是：
1）正常，如果可能，否则全部
或
2）正常，但实际上强制实施了最大宽度。

Is there a way, in CSS without knowing what the shipping text will be, to either: 1) break normal, if possible, otherwise break-all or 2) break normal, but actually enforce the max-width.

我觉得我使这个更复杂，但我不知道如何继续。 / p>

I feel like I'm making this more complex than it needs to be, but I'm not sure how to proceed.

推荐答案

使用 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>

这篇关于断词，喜欢正常，但如果不可能全部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！