Question

我正在创建一个非常薄的页面（它正在收据纸上打印：56毫米宽）

我正在尝试显示一些文字（在这种情况下是送货选择）。有时这个文本是正常的多个间隔的单词，例如＆＃39;签名为第一类＆＃39;，有时它是一个长字，例如＆＃39; UK_RoyalMailSecondClassStandard＆＃39 ;.我的HTML / CSS不知道文本是什么（它呈现的是php）

我的HTML是：

＆＃13;

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

＆＃13;

从上面的代码片段可以看出，Signed for 1st Class看起来很好，但正常，但是UK_RoyalMailSecondClassStandard比max-width宽。对于word-brak：break-all UK_RoyalMailSecondClassStandard看起来是可以接受的（好的废话但是我能得到的最好）但是在第一个角色之后签了第一级休息。

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

分词，更喜欢正常，但如果不是可能的话

2 个答案: