Wrapping rich:treeNode if available horizontal space exceeded (CSS?)

[kwutzke]

Hello,

I have a tree of document nodes, which often go overboard with the available horizontal space in the browser:

Here's the code:

{code:xml}<rich:treeNode type="doc"
               iconExpanded="/resources/images/icons/#{treeNode.iconFileName}"
               iconCollapsed="/resources/images/icons/#{treeNode.iconFileName}"
               iconLeaf="/resources/images/icons/#{treeNode.iconFileName}"
               id="doc-node">
  <h:selectBooleanCheckbox value="#{treeNode.inToc}" />
  <rich:inplaceInput value="#{treeNode.name}" />
  <h:outputText value="#{treeNode.fileName}" />
  <h:outputText value="#{treeNode.expiryDate}">
    <f:convertDateTime pattern="dd.MM.yyyy" />
  </h:outputText>
  <h:commandLink action="#{filePreviewer.createPreview(document)}" id="preview-button">
    <h:graphicImage library="images/icons" name="page_white_magnify.png" />
  </h:commandLink>
  <h:commandLink>
    <h:graphicImage library="images/icons" name="delete.png"  />
  </h:commandLink>
</rich:treeNode>{code}

What can I do to achieve that the nodes' elements won't be cut at the right but will instead wrap to the next line, much like CSS text wrap? It doesn't really matter where at first. I tried a few CSS properties like <rich:treeNode ... style="display: inline;"> but that doesn't work.

To me the problem is that there's not only simple text involved. The desired behavior would probably be to wrap at the element that's exceeding the width.

Can it be done, probably via CSS?

Thanks

Karsten

PS: Another option would be to redesign the displayed elements, but this is not what I'm asking for right now.