0

xhtmlページに表示しているこの文字列があります。ある程度減らして、文字列の最後に 3 つまたは 4 つのドットを付けたいと思います。

これは 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でも機能しませんでした。

4

2 に答える 2

3

が機能するにはtext-overflow: ellipsis;、次の 3 つが必要です。

  • overflowhidden、scroll、またはに設定する必要がありますauto
  • white-space: nowrap;
  • テキストは要素の幅よりも長くする必要があります

デモ: http://jsfiddle.net/ThinkingStiff/mCJCR/

#message-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
于 2012-07-09T06:17:25.837 に答える
1

text-overflow: ellipsis幅/高さの制約が定義されている場合にのみ機能し、overflow: hidden.

于 2012-06-24T17:59:00.710 に答える