需要帮助弄清楚为什么文本溢出我的 h:outputText 在带有 Primefaces 的 p:panelGrid 中

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

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

：-）

设置静态宽度本身无济于事。但是，当元素的宽度已知（未设置为"auto"）时，overflow: scroll应该像overflow:hidden一样正常工作。是否有可能overflow规则被样式表中其他位置的更具体的规则覆盖？在我看来，这很可能是罪魁祸首。

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

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

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

总结一下：

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

致所有阅读并回复的人。事实证明，这不是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>

相关内容

最新更新

热门标签：