Question

就像标题所说的那样，我使用的是PrimeFaces，并且我在p：PanelGrid中有一个h：outputText。每当有一个非常长的，不间断的字符串放入h：outputText的“value”字段时，它会溢出由h：outputText创建的跨度和由p：panelGrid创建的td，并运行在右侧的页。它必须是一个单一的，长的，不间断的文本字符串，但它总是会溢出它的边界。我试过添加style =“overflow：scroll;”和style =“width：100px;”，以及其他可能的修复，但文本中没有任何内容。有没有人知道为什么会这样，我能做些什么来解决它？

感谢您花时间阅读，并度过了美好的一天。

： - ）

Answer 1

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

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

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

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

总结一下：

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

Answer 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>

需要帮助弄清楚为什么文本溢出我的h：outputText在A p：panelGrid中使用Primefaces

2 个答案: