需要帮助找出为什么文本会在带有 Primefaces 的 p:panelGrid 中溢出我的 h:outputText答案

【问题标题】：Need Help Figuring Out Why Text Is Overflowing my h:outputText Within A p:panelGrid with Primefaces需要帮助找出为什么文本会在带有 Primefaces 的 p:panelGrid 中溢出我的 h:outputText
【发布时间】：2012-12-08 04:45:04
【问题描述】：

正如标题所说，我正在使用 PrimeFaces，并且我在 p:PanelGrid 中有一个 h:outputText。每当有一个很长的、完整的字符串放入 h:outputText 的“value”字段中时，它就会溢出由 h:outputText 创建的 span 和由 p:panelGrid 创建的 td，并跑出右侧页。它必须是一个单一的、长的、不间断的文本字符串，但它总是会溢出它的边界。我试过添加 style="overflow: scroll;"和 style="width: 100px;" 和其他可能的修复，但文本中没有任何内容。有谁知道为什么会发生这种情况，我能做些什么来解决它？

感谢您抽出宝贵时间阅读，祝您有美好的一天。

:-)

【问题讨论】：

是否可以在仍然发生这种情况的地方添加一些小代码示例？
stackoverflow.com/questions/4556980/… 看看是否适用
Aksel Willgert - 不，不能提供任何代码。对不起。周一上班时我会试试你的链接。谢谢你帮我看看这个。
提供了答案；就像一个有用的建议一样，尽管您使用的是 PrimeFaces，但这确实是一个 CSS 问题。用 CSS 标记它可能会引起更多人的关注。
Greg，我不确定是 CSS 还是 Primefaces，因为 [使用 Firebug] 我找不到任何可能导致问题的 CSS。

标签： primefaces

【解决方案1】：

设置静态宽度本身并没有帮助。但是，当元素的宽度已知（未设置为“auto”）时，overflow: scroll 应该像 overflow:hidden 一样正常工作。 overflow 规则是否可能被您的一个样式表中其他地方的更具体的规则覆盖？这让我觉得最有可能是罪魁祸首。

如果可以丢失某些信息（例如，在悬停时访问完整字符串或单击图标），您可以结合以下内容：

.someElement {
  overflow: hidden;
  text-overflow: ellipsis;
}

在支持text-overflow: ellipsis 的浏览器（并非所有浏览器）中，您会在截断点看到一个简洁的省略号字符。否则它会在你的容器边缘被切断。

总结一下：

overflow:scroll 应该已经可以工作了。如果不是，则有另一条规则取代它。
如果这样做不会破坏您的项目要求，您可能需要考虑省略号解决方案而不是滚动条

【讨论】：

Greg ...谢谢，但这也不起作用。正如你所建议的，我将把它作为 CSS 和/或 HTML 问题重新发布。我可以创建一个非常简单的 HTML 页面并重现此错误 - 我会将其发布为“回答您的问题”。感谢您的帮助。
没问题，布赖恩。我用小提琴测试只是为了确保我是对的（而且我是对的）......还能是什么？我能想到的最后一件事是您的元素具有 display:inline 而不是 display:block 或 display:inline-block。

【解决方案2】：

致所有阅读并回复的人。事实证明，这不是 Primefaces 问题，而是 HTML/CSS 问题。我将因此重新发布这个问题。感谢您抽出宝贵时间阅读和回复。下面是我的问题的简单 HTML 再现，以及提到的一些建议：

<!DOCTYPE html>
<html>
    <head>
        <title> problem </title>
        <style type="text/css">
            span.troubleSpan {
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <h4> problem </h4>
        <div>
            <table border="1">
                <tr>
                    <td>
                        <span>cell</span>
                    </td>
                    <td>
                        <span>&nbsp;</span>
                    </td>
                    <td>
                        <span>cell</span>
                    </td>
                    <td>
                        <span class="troubleSpan">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
                    </td>
                    <td>
                        <span>&nbsp;</span>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

【讨论】：