Division - Specified Width Line Breaks

I’m trying to work with a ‘specified width’ Division in a Responsive Grid with extra long text. The problem I’m having is that the template/merge field I’m displaying is a long string and instead of displaying on a second line, I get jumbled text on top of each other. Is there way to put a space or line break to display properly? Using ‘Fit to Content’ is not an option. Below is a snapshot

Hi, Yechiel,
What browser are you using? Do you mind posting the code you are using for your template?
Thanks,
Emily

Hey Emily,

I’m using Chrome.

This is the code that I’m using:

(the bold text is the one I’m having trouble with)

{{Source__r.Type}}
Rep: {{Source__r.Name}}
{{#Account__r.Rep__c}}
Support Rep: {{Account__r.Rep__c}}
{{/Account__r.Rep__c}} {{#Company__r.Name}}
Mgmt: {{Company__r.Name}}
{{/Company__r.Name}} {{#Group__c}}
Group: {{Group__c}}
{{/Group__c}}

Thanks!

Yechiel,
It looks like this is occurring because of the nx-pagetitle-subtitle class, which has a default line-height property of “4pt”. I would recommend either:
(a.) adding the attribute style=“line-height:normal” to each div using the nx-pagetitle-subtitle  class, or
(b.) instead of using the css class, just apply the style attributes you want (e.g. font-weight, color) to each div (or make your own css class and specify the properties for that class through inline css)

Let me know how that works.
Emily

Hey Emily,

I went with option ‘a’ and that worked beautifully! 

Thank you!

Yechiel,
Great! I’m glad that worked.