Question

我在我的xhtml页面中显示了这个字符串。我想把它减少到一定限度，并在字符串的末尾加上三个或四个点。

这是ui：重复代码：

<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
white-space: nowrap;
文本必须长于元素宽

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

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

Answer 2

text-overflow: ellipsis仅在您定义了宽度/高度约束且overflow: hidden时才有效。

段落延续效果就像最后三个点或其他东西

2 个答案: