Okay, I’ve figured out how to make variable width text with a background. I still need your help though!
Here is the code to make the variable width text with background:
You put this in an HTML element and the HTML element will turn its font, sizing, padding, and background based off of that code. Since mine is in a repeating group I pull the color of the background and the text itself from a database.
font: 12px Roboto-Regular400;
float: left !important;
<div class="beta" style="background: #000000"
Text goes here.
The result looks like this:
As you can see, the shape expands based on the text length, so first mission is accomplished.
The missing part I am stuck on is since I have two containers – one named “alpha” the other “beta” – with variable widths, I need to make the second one offset by a variable number of pixels.
I have a transform: translateX statement set up to put it 100px to the right. This works:
I need the statement now to pull the width of the first container and offset the second by a variable amount. I tried this statement: