html - 段落延续效果，比如末尾三个点之类的

Question

我在我的 xhtml 页面中显示了这个字符串。 我想将它削减到某个限制，并在字符串的末尾放置三四个点。

这是 ui:repeat 代码:

<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>

我想用粗体对上面的代码产生影响......即对一个字符串的消息。 我尝试过 text-overflow:ellipsis 但即使在 Chrome 中也无法正常工作。

Answer 1

要使 text-overflow: ellipsis; 正常工作，需要三件事:

• overflow 必须设置为 hidden、scroll 或 auto
• 空白:nowrap;
• 文本的长度必须大于元素的宽度

演示:http://jsfiddle.net/ThinkingStiff/mCJCR/

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