7

非常に薄いページを作成しています (レシート用紙に印刷しています: 幅 56mm)

テキストを表示しようとしています (この場合は配送選択)。このテキストは通常​​、'Signed for 1st Class' のように間隔をあけた複数の単語である場合もあれば、'UK_RoyalMailSecondClassStandard' のように 1 つの長い単語である場合もあります。私の 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 は word-break normal で適切に見えますが、UK_RoyalMailSecondClassStandard は max-width よりも幅が広くなっています。word-brak:break-all の場合、 UK_RoyalMailSecondClassStandard は受け入れられるように見えます (まあ、がらくたですが、私が得ることができる最高のものです)。

配送テキストがどうなるかを知らずに 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

単語を分割する 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 に答える