When working with dynamic text, you might encounter the problem where the text ends up longer than expected. If you have this issue, we have the solution! In this blog post you’ll learn to control your dynamic text while maintaining the integrity of your visual design.

Consider the following example: starting with a new blank file, let’s make the background gray, add 2 white divs, and place text elements on top. You can see that the text content is bound to the product name in the Dynamic panel.


When previewed, it looks like this:

But when adding extensive sample text, you’ll see this issue:


There are actually two issues occurring here: the right item text has become smaller, and it's also overflowing its container.


Truncation & Minimum Font Size

To fix both issues, let's switch to Code view and search for the gwd-text-helper tag following the body tag. Copy the code below and paste it inside the tag before the closing bracket.

gwd-fitting-truncate="true" gwd-min-font-size-px="7"


Now when previewed, it will look like this:



Much better. The text now stays within its bounding box due to truncation—but it might be a little small. That’s easy to adjust by editing the gwd-min-font-size-px attribute added above. Currently it's set to 7, but adjusting it to 12 may look better, and there are 2 ways to do that—either in the gwd-text-helper tag to specify a global setting for all text in your document, or to control each text element separately (common for headlines or titles), add the tag directly to the paragraph element like this:


You may also prevent text resizing entirely by using a gwd-min-font-size-px value equal to your initial size (16px in this case).

These controls should solve most dynamic text issues, but there is one case where you may want a little more control—the case of vertical centering. Let's duplicate the two text boxes and bind their content to products 2 & 3 (I’ve also adjusted the amount of text to demonstrate the issue):



Vertically Centering Dynamic Text

You may also want to vertically center text fields, so let's go ahead and do that for products 2 & 3. First wrap each text field in a new div by right-clicking the paragraph element and selecting “wrap”. We’ll also name the new div with the -ctn suffix, and use -txt for text elements to help keep things organized.



Double-click the new -ctn div to edit the paragraph element and apply these settings in the CSS panel:

left: 0; 
width: 100%; 
top: should be de-selected 
Change height to max-height: 100% 
Next open Code View and add the class v-center to the paragraph tag.

Repeat the above steps for both new text fields.



Finally, copy the following code and paste it at the end of the CSS styles in the "head" element of your document:

p { 
margin: 0px; 
} 

.v-center { 
position: relative; 
top: 49%; 
transform: translateY(-50%); 
} 

.v-bottom { 
position: relative; 
top: 100%; 
transform: translateY(-100%); 
} 

Now when previewed, your text fields should be vertically centered as shown below:


Note the v-bottom class above can be used in cases where the text needs to be aligned at the bottom of its container.

With these three controls in hand (truncation, minimum font size, and vertical positioning), you should be able to solve the most common dynamic text formatting issues. Give these tips a try and let us know how they work for you in the comments!

Posted by Kent M, Google Web Designer