how to setup a label to wrap around?

asked 2019-04-09 04:29:32 +0800

davout
1435 ● 3 ● 18

updated 2019-04-09 17:13:14 +0800

I have a "news.description" label' in a template where I want the label value to wrap around across multiple lines.

<template name="newsbox" var="news" status="s">
   <hlayout>
      <image src="@load((s.index % 2) eq 0 ?'/image/news1.png':'/image/news2.png')" width="64px" height="64px" />
        <vlayout>
            <label value="@load(news.headline)" sclass="label-bold"/>
            <label  value="@load(news.description)" sclass="label-wrapping" multiline="true"/>
           <a label="Read more...." href="@load(news.webLink)" />
      </vlayout>
   </hlayout>
   <space orient="vertical"/>
</template>

I'm using some custom styles like...

  <style>
     .panel-caption-bold .z-panel-header {
        font-weight: bold;
     }
     .label-bold {
        font-weight: bold;
     }
     .label-wrapping .z-label {
        white-space: normal;
        word-break: break-all;
     }
  </style>

... the 'news.description' level is displaying across multiple lines but the words are not splitting so I am losing text at the end of each line.

Any suggestions?