4

How can you use   when using react-intl so control word breaking. I have a message like Rs. 100,00,000 but it is breaking on Rs. is there anyway in can write the message as Rs. 100,00,000 When I try doing that it displays the Rs. 100,00,000 when the html is rendered

Qais Palekar
  • 71
  • 2
  • 4

3 Answers3

3

I've put unicode character \u00a0 just into the text message which suddenly worked :)

Text message: 'Please provide additional information like server logs'

Message with non breaking space: 'Please provide additional information like server\u00a0logs'

Agiltrue
  • 41
  • 3
0

Using entity number   instead of worked for me

reference:Html Entities W3schools

Qais Palekar
  • 71
  • 2
  • 4
0

Not sure if it is good practice to coupling breaking logic with the message (although it is sometimes necessary). In most cases, this might require additional communication later with translators as they are usually unfamiliar with coding practices.

Also, number, currency, and date formatting are not the same in all languages. In case you are striving for perfectionism, maybe you should format these values as well.

If this breaking rule is the same in all your languages, maybe wrapping the localization message with the div and setting the white-space: nowrap is a cleaner solution.

<div style={{ whiteSpace: "nowrap" }}>
  {message}
</div>

Alternatively, you can pass the HTML entity as a placeholder.

// "message.example": "Rs.{nbsp}100,00,000"
<FormattedMessage id="message.example" values={{ nbsp: <>&nbsp;</> }} />
Zoran Luledzija
  • 336
  • 1
  • 9