中的动画列。无论文本有多大，所有列中的文本都限制为一行

Question

希望你们一切都好。我有 ap:dataTable，其中有这样的列

<p:column filterBy="#{Faq.faqCategoryName}"
          headerText="Category"
          filterMatchMode="contains">

    <h:outputText value="#{Faq.faqCategoryName}"
                  style="color: #0d5b7f;" />

</p:column>

<p:column filterBy="#{Faq.question}"
          headerText="Questions"
          filterMatchMode="contains" >

    <h:commandLink value="#{Faq.question}"
                   action="#{faq.viewFaq()}"
                   style="color: #0d5b7f;" >

       <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

</p:column>

<p:column filterBy="#{Faq.answer}"
          headerText="Answers"
          filterMatchMode="contains" >

    <h:outputText value="#{Faq.answer}"
                  style="color: #0d5b7f;" />

</p:column>

<p:column headerText="Action" >

    <h:commandLink action="#{faq.updateFaq}"
                   value="Update"
                   title="Update FAQ Category"
                   style="color: #0d5b7f;text-decoration: underline" >

        <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

    <p:spacer width="3" />

    <h:commandLink action="#{faq.deleteFaq(Faq)}"
                   value="Delete"
                   title="Delete FAQ Category"
                   style="color: #0d5b7f;text-decoration: underline"
                   onclick="if (! confirm('Are you sure, you want to delete the FAQ?') ) { return false;}; return true; ">

        <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

</p:column>

问题是问题和答案列可以尽可能大。现在发生的情况是，如果这些列中的文本很大，那么它会出现在同一列的下一行。我希望无论这些列中的文本有多长，文本都不会附加到下一行。

相反，我显示省略号，表明该列有更多文本，当您将鼠标悬停在该列上时，会出现一个显示整个文本的框。 我的意思是说所有列都应该只有一行。如果文本较大，则显示省略号，而不是附加到下一行的文本。 这可能吗？如果是的话我该怎么做？我需要在这里使用 jQuery 吗？

谢谢

Answer 1

一切皆有可能！

您可以使用这个简单的 JavaScript 解决方案： http://www.barelyfitz.com/projects/truncate/ （如果您不喜欢 onclick 事件，您可以实现 onhover 事件）。

您可以使用以下 JQuery 解决方案： http://henrik.nyh.se/2008/ 02/jquery-html-截断。

而且，因为您选择了 Primefaces，所以您可以使用工具提示组件。通过截断列值来组合 javascript 解决方案，并向工具提示提供完整的值（您也可以从服务器提供截断的值）：

<p:column>
   <p:outputText id='myId' value="#{myBean.myTruncatedQuestionValue}" />
   <p:tooltip for="myId" value="#{myBean.myUntruncatedQuestionValue}" showEffect="fade" hideEffect="fade" />  
</p:column>

http://www.primefaces.org/showcase-labs/ui/tooltip.jsf

PS：当你说希望你们都会好吧，看来您正在宣布地震……这令人悲伤，而且是错误的！

Answer 2

这是工作

<p:column filterBy="#{Faq.question}"
          headerText="Questions"
          filterMatchMode="contains">

    <h:commandLink  id="question"
                    value="#{Faq.partialQuestion}"
                    title="#{Faq.question}"
                    action="#{faq.viewFaq()}"
                     style="color: #0d5b7f;" >

        <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

    <p:tooltip for="question"
               showEffect="fade"
               hideEffect="fade" />

</p:column>

工具提示使用您的标题属性，以显示工具提示上的文本显示。

谢谢