7

我正在创建一个非常薄的页面（它打印在收据纸上：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 Break。

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

我觉得我让这变得比它需要的更复杂，但我不知道如何继续。

4

2 回答 2

3

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

于 2016-02-13T11:01:03.647 回答
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>

于 2016-02-13T11:16:08.357 回答