csszk

Is it possible to bold a text of a list item until you find a dash in CSS?

I am creating a list dynamically and would like to add some CSS that bold part of the text of the list-items. This would be possible to be delivered by bolding the text until you find a dash -.

The output I am aiming for is the above:

First Title - first element
Second Title - second element

<listbox hflex="1" style="text-align:left; border: none;" model="@load(model.validationWarnings)">
    <template name="model">             
        <listitem disabled="true" style="background: #ffff !important;">
            <listcell value="${each}" label="${each}" style="font-size: 12px; color: #E85252;"/>
        </listitem>   
    </template>
</listbox>
Solution

  • A better option would be to put two labels in your listcell. Instead of using ListModelList<String> or List<String> as model, you can use a pojo with msg1 and msg2 fields for example, or any other type that allow multiple entries per line (Map, Array, etc.)

    Assuming Pojo option (ListModelList<MyPojo> instead of ListModelList<String>):

    <style>
    .msg1{
        font-weight: bold;
    }
</style>
...
<listcell value="${each}">
    <label value="${each.msg1}" sclass="msg1" />
    <label value="${each.msg2}" sclass="msg2" />
</listcell>