Change font size and color of a tspan that comes under a label


I want to basically change a particular tspan that comes under text of an element label. As write now the whole text is a string so if i apply style to djs-label class, it will change the whole text but i want to change only a particular tspan under that text. Is there any way i can achieve it.

Best Regards

What is the desired outcome? Preferably, please show a mock of what you want to achieve.

Note that tspans in the labels are generated automatically depending on the length of the text.

I want to achieve something like this, where you can see after In Take, the In Progress is shown in different font color and size. So need to specifically style the In Progress part.


How do you create the labels in your application? Note that simply typing “Intake In Progress” at produces a different layout:


I am basically generating XML string for the diagram, in order to show the label, i am adding name to bpmn:task , and in the name i am pass string as - Intake \n In progress

You can also use Shift + Return to create line breaks directly in bpmn-io :smile:

Recording 2022-09-27 at 10.02.38

yep, but that’s not my use case, i am actually trying to change the style of the bottom text. This needs to be shown only in bpmn Viewer.

OK so I assume the second line is supposed to represent something different than the element way. In that case, the non-hacky and stable solution would involve the overlays: Overlays and more Modeling | Blog |
This is what I’d suggest to use instead of adding a line to the label.