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

Question

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

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)

My html is:

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

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.

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.

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

Tachograph

Possible duplicate of Break long word with CSS – Dreyfus

Same solution as that question, but the question it self is a little different – Tachograph

It's exactly the same problem. – Dreyfus

Answer 1

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

Lurette

This doesn't actually answer the question. The question is whether there is a way to prefer word-breaking without knowing what the text will be – Gunshot

@Gunshot - this question is over 2 years old. The answer was upvoted and accepted. It's obviously solved the issue and answers the question. If you have a different question - ask, don't downvote. – Lurette

@Lurette I'm not sure what the age of the question has to do with it. Besides, it may have solved the issue for OP, but it doesn't actually answer the question he was asking. To me, that means it's not a good answer, but feel free to disagree. – Gunshot

@Lurette on my view, the point of StackOverflow is to be a repository of generally applicable answers to particular questions. Your answer to his question, while helpful in his specific circumstance, is not an example of this: it does not answer the question directly, but provides a workaround for his specific use case. To me, that makes it a non-answer. – Gunshot

@Gunshot - this question, as many others questions (effectively most SA questions) are specific, not general. The snippet embedded in the question is "broken", and represents the problem faced by OP. The snippet in this answer is fixed and represents a suitable and relevant solution. Moreso, specific problems have specific solutions that might not be applicable to other (albeit similar) problems whose particular solution might not be applicable or simply too complicated for other instances. You can abuse the system and downvote, but you're fundamentally wrong. – Lurette

Answer 2

Two different ways to break up words:

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

Gael

thanks for your comment, it answers my question but Amit got there a few mins before you! – Tachograph

no problem; I know how it works, people opens the question when it has no answers then do multiple right answers, fair enought vote for the first submission! – Gael