段落連續效果像最後的三個點或什麼

我有這個字符串，我顯示在我的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中也無法使用。

來源

2012-06-24 Mudassir Shahzad

對於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; 
}

來源

2012-07-09 06:17:25 ThinkingStiff

這不完全正確：您也可以在溢出時使用滾動和自動值。 – Knu

@Knu太棒了。不知道。 – ThinkingStiff

@ThinkingStiff是這種方法瀏覽器兼容？ –

text-overflow: ellipsis只適用於您有定義的寬度/高度限制和overflow: hidden。

來源

2012-06-24 17:59:00

那麼該怎麼做？ –

段落連續效果像最後的三個點或什麼

回答

相關問題