Hi,

Customer has reported that header title text in Dynamic Layout is displayed in a single line and it doesn't wrap by itself. In this post, I am sharing why so and how to wrap it.

• Issue

By default, header title text in Dynamic Layout doesn't wrap by itself, although regular text input field does. Customer wants the header title text to wrap. They don't want a horizontal scroll bar to appear.

• Code

Create a property. Then check "Display header and title" in the Dynamic layout properties and specify the property. Populate the property with a long string in runtime.

• Explanation

Regular text input field wraps by itself without doing anything. This is because "overflow-wrap: break-word" is specified in the internal css. You can see it by Developer Tools as below.

However, this css code is not applied for header title text. If you want to customize it, you can do so from Skin rule. Override Heading 2 Typography and add "overflow-wrap: anywhere" in the additional styles as below. Use "anywhere" instead of "break-word" so you can forcibly wrap consecutive English text too.

Here is the result. Now header title text is also wrapped.

• Notes

In this example, customer tested long consecutive English text with no space, and so we had to modify Skin rule. However, if you have a space within text, or if characters are CJK (Chinese, Japanese, and Korean), text is automatically wrapped without any modification because it is the default behavior of HTML. Please see below for the default specification of HTML with regard to line break (this is not a Pega-specific topic but general HTML topic).

Parttern 1.

If it is CJK (Chinese, Japanese, and Korean), text is always wrapped even if it is in the middle of a word. Also, special hyphenation is applied so punctuation marks, etc will be placed properly.

Pattern 2.

If it is alphanumeric with space, text is wrapped accordingly. Also, special hyphenation is applied so punctuation marks, etc will be placed properly.

Pattern 3.

If it is alphanumeric without space, text is not wrapped and it is displayed in a single line.

Hope this helps.

Thanks,