Division - Specified Width Line Breaks

  • 1
  • Question
  • Updated 3 years ago
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

Photo of Yechiel Kaplan

Yechiel Kaplan

  • 280 Points 250 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Hi, Yechiel,
What browser are you using? Do you mind posting the code you are using for your template?
Thanks,
Emily
Photo of Yechiel Kaplan

Yechiel Kaplan

  • 280 Points 250 badge 2x thumb
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)


<div class="nx-pagetitle-maintitle">{{Source__r.Type}}</div><div class="nx-pagetitle-subtitle">Rep: {{Source__r.Name}}</div>
{{#Account__r.Rep__c}}<div class="nx-pagetitle-subtitle">Support Rep: {{Account__r.Rep__c}}</div>{{/Account__r.Rep__c}}
{{#Company__r.Name}}<div class="nx-pagetitle-subtitle">Mgmt: {{Company__r.Name}}</div>{{/Company__r.Name}}
{{#Group__c}}<div class="nx-pagetitle-subtitle">Group: {{Group__c}}</div>{{/Group__c}}


Thanks!
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
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
Photo of Yechiel Kaplan

Yechiel Kaplan

  • 280 Points 250 badge 2x thumb
Hey Emily,

I went with option 'a' and that worked beautifully! 

Thank you!
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Yechiel,
Great! I'm glad that worked.