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