0

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

感谢您花时间阅读，祝您有美好的一天。

:-)

4

2 回答 2

0

致所有阅读并回复的人。事实证明，这不是 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>
于 2012-12-09T04:37:25.653 回答
0

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

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

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

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

把它们加起来：

  • 溢出：滚动应该已经工作了。如果不是，则有另一条规则取代它。
  • 如果这样做不会破坏您的项目要求，您可能需要考虑省略号解决方案而不是滚动条
于 2012-12-09T04:12:53.230 回答