Question

I’ve this string which I’m displaying in my xhtml page.
I want to cut it down to some limit and put three or four dots at the end of the string.

This is the ui:repeat code:

<ui:repeat var="userMsg" value="#{messagesManagedBean.paginator1.model}">
    <center><img class="h-diff" src="../images/differentiator-profile.jpg" width="437" height="1" /></center>
    <div id="message">
        <div id="senderImg">
            <img class="senderImg" src="../images/profile-pic.jpg" width="50" height="50" />
        </div>
        <div id="message-txt-area">
            <div id="senderName">
                <p:commandLink styleClass="senderName" value="#{userMsg.userFullname}" action="#{myProfileManagedBean.loadProfileFrontInformation(userMsg.userId)}"></p:commandLink>
            </div>
            <ui:fragment rendered="#{userMsg.isRead}">
                **<div id="message-txt">
                    #{userMsg.message}
                </div>**
            </ui:fragment>
            <ui:fragment rendered="#{not userMsg.isRead}">
                **<div id="message-txt" class="msgNotRead">
                    #{userMsg.message}
                </div>**
            </ui:fragment>
            <div id="msgAction">
                <p:commandLink styleClass="reply-btn" action="#{messagesManagedBean.setSelectedMsg(userMsg)}"
                               value="Reply" oncomplete="messageDialog.show()" update=":messagesForm:dialogGrid">
                    <f:param name="userMsg" value="#{userMsg}" />
                </p:commandLink>
                <ui:fragment rendered="#{userMsg.isRead}">
                    <p:commandLink styleClass="open-btn" value="Open" action="#{messagesManagedBean.setSelectedMsg(userMsg)}"
                                   oncomplete="messageDialog2.show()" update=":messagesForm:dialogGrid2">
                        <f:param name="userMsg" value="#{userMsg}" />
                    </p:commandLink>
                </ui:fragment>
                <ui:fragment rendered="#{not userMsg.isRead}">
                    <p:commandLink styleClass="open-btn" value="Open" action="#{messagesManagedBean.setSelectedMsg(userMsg)}"
                                   actionListener="#{messagesManagedBean.messageOpenedListener(userMsg.messageId)}" 
                                   oncomplete="messageDialog2.show()" update=":messagesForm:dialogGrid2">
                        <f:param name="userMsg" value="#{userMsg}" />
                    </p:commandLink>
                </ui:fragment>
            </div>
        </div>
    </div>
</ui:repeat>

​
I want to do the effect on the above code in bold… i.e. on the message which is a string.
I’ve tried text-overflow:ellipsis but didn’t work even in Chrome.

Answer 1

For text-overflow: ellipsis; to work, three things are required:

• overflow must be set to hidden, scroll, or auto
• white-space: nowrap;
• the text must be longer than the element is wide

Demo: http://jsfiddle.net/ThinkingStiff/mCJCR/

#message-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}