1

I have been trying to implement Chinese traditional characters in my Visualforce pdf. Seeing the salesforce documentation, I changed the font to Arial Unicode MS but the word-wrap: break-word; is not working. I need to break the characters to fit in the td width.

<td class="padded" style="width:162px;font-family: Arial Unicode MS;word-wrap: break-word;font-weight: 900;">
    {!value}
</td>

1 Answer 1

3

word-wrap was introduced in CSS 3
The library that Salesforce uses to turn Visualforce into PDFs, Flying Saucer, only supports up to CSS 2.1

You'll need to do something else to prevent your text from overflowing the td box. Something like adding <br /> into your text, or perhaps adding padding on the left and right (e.g. padding: 0 0.5em 0 0.5em;)

If your font-size is 16px (the default for most people), then 0.5em = 16 * 0.5 = 8px

The CSS 2 box model means that the padding adds to the width and height you specify, so if you need to keep the border at 162px you'll need to subtract the left and right padding from the width.

left padding + width + right padding = 162px
8px + width + 8px = 162px
width = 146px

3
  • Thanks for your comment. Right Now, I have fixed most of it but my characters are dynamic. So is there any way to put a condition like if length of string = 150px(suppose), then add </br> in between. break words isn't working. You can see the below screenshot. This is the only issue now. Need to fit the text in next line. imgur.com/SFSb78L May 8 at 8:55
  • Check this image May 8 at 10:02
  • 1
    @BetaTester Of course break-words isn't working, that was introduced in CSS 3 (it's part of word-wrap). If padding doesn't work, then you'll need to add line breaks to it in your controller/extension.
    – Derek F
    May 8 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.